css:
<style> .page-wrap { display: flex; } .content-wrap { /* No flex here, other cols take up remaining space */ order: 2; width: 60%; background: #eee; } .nav-wrap { order: 1; width: 20%; /* For old syntax, otherwise collapses. */ flex: 1; background: #ddd; } .sidebar-wrap { order: 3; width: 20%; flex: 1; background: #ccc; } .content-wrap, .sidebar-wrap, .nav-wrap { padding: 1em; } * { -moz-box-sizing: border-box; box-sizing: border-box; } </style>
html:
<div class="page-wrap"> <section class="content-wrap"> <h1>Main Content</h1> <p><strong>I'm first in the source order and second in the template.</strong> </p> <p>The key to victory is discipline, and that means a well made bed. You will practice until you can make your bed in your sleep. Fry, we have a crate to deliver. Hey, guess what you're accessories to.</p> <p>I'll get my kit! That's not soon enough! Oh, all right, I am. But if anything happens to me, tell them I died robbing some old man.</p> </section> <nav class="nav-wrap"> <h2>Nav</h2> <ul> <li><a href="#">Home</a> </li> <li><a href="#">About Us</a> </li> <li><a href="#">Clients</a> </li> <li><a href="#">Contact Us</a> </li> </ul> </nav> <aside class="sidebar-wrap"> <h2>Sidebar</h2> <p>I am a rather effortless column of equal height.</p> </aside> </div>