2 Column ‘Right Sidebar’ (Responsive Layout)

15 Feb 2022 — Updated 15 Jan 2023

Layout Features

This is a fully-featured layout that ticks all the boxes.

Lightweight layout system

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.

Full responsive design

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)

Equal height columns

It doesn't matter which column contains longer content, all columns will be the height of the tallest column.

100% valid HTML and CSS

There are no buggy tricks or hacks to make this layout work, it's based on flexbox CSS.

Semantic HTML5 tags

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 Content</h1>
                <p>Your main page content goes here.</p>
            </main>
            <aside data-md1-3 data-md1 class="left-sidebar">
                <h2>Left Sidebar</h2>
                <p>You can put side navigation here or aside content.</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>

Column source ordering (for better accessibility and SEO)

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.