<body> <header>Header</header> <div id="main"> <article>Article</article> <nav>Nav</nav> <aside>Aside</aside> </div> <footer>Footer</footer> </body>
* { box-sizing: border-box; } body { display: flex; min-height: 100vh; flex-direction: column; margin: 0; } #main { display: flex; flex: 1; } #main > article { background: blue; flex: 1; order: 1; } #main > nav, #main > aside { flex: 0 0 20vw; } #main > nav { background: #D7E8D4; order: 3; } #main > aside { background: beige; order: 2; } Header, footer { background: green; height: 20vh; } Header, Footer, Article, Nav, aside { padding: 1em; }
header
Header
background
var
This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)