<header class="main-header">Header</header> <div class="row"> <aside class="primary-sidebar">Sidebar (left)</aside> <main class="content">Main content goes here</main> <aside class="secondary-sidebar">Sidebar (right)</aside> </div> <footer class="main-footer">Footer</footer>
* { padding: 0; margin: 0; } body { font-size: 1.2em; display: flex; flex-direction: column; height: 100vh; text-align: center; } .row { flex: 1 1 auto; background: green; display: flex; } .main-header { background: red; flex: 0 0 auto; } .main-footer { background: red; flex: 0 0 auto; } .primary-sidebar, .secondary-sidebar { background: turquoise; flex: 0 0 auto; width: 20%; } .content { flex: 1 1 auto; min-width: 400px; }