Responsive Column Docs

Responsive Page Layouts

Holy Grail Layout

Left Sidebar Layout

Right Sidebar Layout

Full Page Layout

Responsive Column Sets

1 Column

2 Columns

3 Columns

4 Columns

5 Columns

6 Columns

7 Columns

8 Columns

'Full Page' 1‑Column Responsive Layout

Semantic HTML5 — Full browser support — Fully customizable — SEO friendly

This layout uses the Responsive Columns layout system.

Download All Demos
(responsive-columns.zip 155k)

Main Content

Even though a full-page layout doesn't responds to changing screen sizes, the header and padding dimenstions do. Here's the layout it uses: (Change the size of your browser window to see the header adjust.)

Full-page layout

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 class="column1">
        <h1>Main Content</h1>
        <p>Your main page content goes here.</p>
    </main>
</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.

Fully customizable

Easily modify any aspect of this layout to suit your specific requirements. See the Responsive Columns documentation for instructions.

Full browser support

This layout will work on all modern browsers plus any old browsers that support Flexbox:

  • Google Chrome 29+
  • Mozilla Firefox 28+
  • Microsoft Edge 12+
  • Apple Safari 9+
  • Opera 17+
  • Android Browser 4.4+
  • Opera Mobile 12.1+
  • Chrome for Android
  • Firefox for Android
  • Opera Mini

Need to support ancient browsers? See my original full-page layout that works back to Internet Explorer 5.5! (Note: it's not responsive)

Free for anyone to use

Simply download the demo files and you're good to go.

Compatible addons

This layout is fully compatible with the following:

Web Design Articles

Looking into an empty div

Empty HTML Tags (21 Weird Things You Need To Know!)

Web design
Columns all the same height

Equal-Height Columns (CSS Grid, Flexbox, Floated Containers, & Table Methods)

Web design
How to add CSS to HTML

How to add CSS to HTML (With Link, Embed, Import, and Inline styles)

Web design
A delicious soup made from custom elements

Replace Divs With Custom Elements For Superior Markup

Web design
Padding bewteen desktop, tablet, and mobile

Responsive Padding, Margin & Gutters With CSS Calc

Web design
Superman blocking styles

Style Blocker: How To Prevent CSS Cascade With Shadow DOM

Web design
Responsive text size

Responsive Font Size (Optimal Text at Every Breakpoint)

Web design
Responsive Columns Layout System

Responsive Columns: Build Amazing Layouts With Custom HTML Tags

Web design
Responsive house plan

Responsive House Plan (Web Design Meets Architecture!)

Architecture
Boggle dice shaker

Boggle Dice Shaker (Built With Javascript)

Web design
Footer at the bottom of the page

Get Down! How to Keep Footers at the Bottom of the Page

Web design
Is CSS margin top or bottom better?

CSS: Margin Top vs Bottom (A Trick You Should Know)

Web design
Beautiful centered menus with CSS

CSS: Horizontally Centred Menus (With Optional Dropdowns)

Web design
Ads that can change size to fit any screen size

Responsive Banner Ads with HTML5 and CSS3

Web design