body, html { height: 100%; width: 100%; margin: 0px; padding: 0px; } #main { height: 80%; display: -webkit-flex; display: flex; flex-flow: row; } #main article { background: #CFC; flex: 3 1 60%; order: 2; color: #F22613; } #main nav { background: yellow; /* For browsers that do not support gradients */ background: -webkit-linear-gradient(yellow, red); /* For Safari 5.1 to 6.0 */ background: -o-linear-gradient(yellow, red); /* For Opera 11.1 to 12.0 */ background: -moz-linear-gradient(yellow, red); /* For Firefox 3.6 to 15 */ background: linear-gradient(yellow, red); /* Standard syntax (must be last) */ color: red; font-family: 'Ranga', cursive; font-size: xx-large; flex: 1 6 20%; order: 1; text-align: center; } #main aside { border: 4px solid red; border-radius: 12px; background: #CCF; flex: 1 6 20%; order: 3; color: #db0a5b; } nav, article, aside{ text-align: center; height: 550px; } header, footer { display: block; min-height: 10%; background: #FC6; color: green; } header{ text-align: center; font-family: 'Indie Flower', cursive; font-size: 250%; } footer{ font-family: 'Indie Flower', cursive; font-size: 90%; } article{ text-align: center; font-family: 'Lobster'; font-size: 150%; } aside{ text-align: center; font-family: 'Lobster'; font-size: 100%; } table{ margin: 0px; padding: 0px; }