Main Content
This layout responds to all screen sizes. Here are the two layouts it uses for mobile and tablet breakpoints: (Change the size of your browser window to see the layout adjust.)

Holy Grail Layout
Left Sidebar Layout
Right Sidebar Layout
Full Page Layout
1 Column
2 Columns
3 Columns
4 Columns
5 Columns
6 Columns
7 Columns
8 Columns
Semantic HTML5 — Full browser support — Fully customizable — SEO friendly
This layout uses the Responsive Columns layout system.
Download All Demos
(responsive-columns.zip 155k)
This layout responds to all screen sizes. Here are the two layouts it uses for mobile and tablet breakpoints: (Change the size of your browser window to see the layout adjust.)
This is a fully-featured layout that ticks all the boxes.
To make the structure of this layout simple to define and easy to customize, the Responsive Columns layout system is used. This system is only 5.9kb (minified and gzipped) and it provides a suite of powerful layout tools with the simplicity of custom HTML tags.
See the amazing things that are possible in the Responsive Columns documentation.
This layout will work on devices of all sizes, from the smallest smartphone to a widescreen desktop display.
The following breakpoints are used:
Size | Min-width | Max-width |
---|---|---|
Extra-small (mobile) | (no min set) | 599px |
Small (tablet portrait) | 600px | 899px |
Medium (tablet-landscape) | 900px | 1199px |
Large (desktop) | 1200px | 1799px |
Extra-Large (widescreen) | 1800px | (no max set) |
It doesn't matter which column contains longer content, all columns will be the height of the tallest column.
There are no buggy tricks or hacks to make this layout work, it's based on flexbox CSS.
No div-soup here, this layout uses the correct HTML5 tags for the structural elements of the page.
Here's the HTML:
<header data-r-c data-join data-middle class="header">
<figure data-md1-5>
<a href="#">
<!-- place your logo here -->
</a>
</figure>
<ul data-md4-5 md-text-right class="menu-links">
<li><a href="#">Home</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</header>
<r-c join>
<main data-md2-3 class="main-content">
<h1>Main column</h1>
<p>Your main page content goes here.</p>
</main>
<aside data-md1-3 class="right-sidebar">
<h2>Right Sidebar</h2>
<p>Put aside content here or advertising.</p>
</aside>
</r-c>
<footer data-r-c data-join class="footer">
<c1-1>
<ul class="menu-links">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Privacy</a></li>
</ul>
<p><small>Made with <a href="https://matthewjamestaylor.com/responsive-columns" target="_blank" rel="noopener">Responsive Columns</a>.</small></p>
</c1-1>
</footer>
The higher up content appears in your page source code, the more accessible it is and it can be considered more important by search engine algorithms. To make your website as optimized as possible, your main content HTML should come before any side column HTML.
This layout uses a 2-1-3 column source order to put the main content before the side columns.
Easily modify any aspect of this layout to suit your specific requirements. See the Responsive Columns documentation for instructions.
This layout will work on all modern browsers plus any old browsers that support Flexbox:
Need to support ancient browsers? See my 2 column right menu layout that works back to Internet Explorer 5.5! (Note: it's not responsive)
Simply download the demo files and you're good to go.
This layout is fully compatible with the following:
Equal-Height Columns (CSS Grid, Flexbox, Floated Containers, & Table Methods)
Web designHow to add CSS to HTML (With Link, Embed, Import, and Inline styles)
Web designResponsive Columns: Build Amazing Layouts With Custom HTML Tags
Web design