2 Column Layouts (Responsive Demos & Example HTML/CSS)

In this article, we'll explore the various types of two-column layouts and show how easy they are to create with the Responsive Columns layout system. You can download all of these demos with the handy link above.

Let's get started.

2 Column Layout With Gutters

In this two-column layout, the columns stay side-by-side even on small mobile screens.

The HTML

<r-c>
    <c1-2>
        <!-- first column -->
    </c1-2>
    <c1-2>
        <!-- second column -->
    </c1-2>
</r-c>

The Responsive Columns layout system uses tiny custom HTML tags that make coding responsive layouts a breeze. You don't need to know any complicated CSS. See the documentation for more details on the custom HTML tags.

2 Fixed Columns With Equal-Width & Equal-Height

In this two-column layout, the columns stay side-by-side even on small mobile screens. It uses Flexbox CSS under the hood.

The HTML

<r-c join>
    <c1-2 class="red">
        1
    </c1-2>
    <c1-2 class="orange">
        2
    </c1-2>
</r-c>

We add the 'join' attribute to remove all gutters, join the columns together, and add padding. Learn more about gutter mode and join mode in the documentation.

The CSS

.red {
    background:#f97171;
}
.orange {
    background:#f99e50;
}

We only need CSS for the background colors, all the structural CSS is handled by the Responsive Columns system.

2 Responsive Columns, Equal-Width, Equal-Height

In this two-column layout, the columns stack vertically on mobile screens and move side-by-side on tablet and larger devices:

The HTML

<r-c join>
    <c1-2 sm1-2 class="red">
        1
    </c1-2>
    <c1-2 sm1-2 class="orange">
        2
    </c1-2>
</r-c>

We simply add width attributes to each column to specify sizes at different breakpoints. See more details on how to make columns responsive in the documentation.

The CSS

.red {
    background:#f97171;
}
.orange {
    background:#f99e50;
}

Full-Screen 2 Column Layout With Vertically Centered Content

In this two-column layout, the columns are forced to the height of your browser window but their content is vertically centered. This is great for titles or page sections that need to have a big impact as users scroll down.

The HTML

<r-c join class="full-height">
    <c1-2 r-c middle class="red">
        <c1-1>
            <!-- column 1 content -->
        </c1-1>
    </c1-2>
    <c1-2 r-c middle class="orange">
        <c1-1>
            <!-- column 2 content -->
        </c1-1>
    </c1-2>
</r-c>

The vertical centering is achieved by nesting columns and then adding a vertical alignment. See the powerful things you can achieve with nesting here: column nesting documentation.

The CSS

.full-height {
    min-height:100vh; /* vh = viewport height */
}
.red {
    background:#f97171;
}
.orange {
    background:#f99e50;
}

Left Sidebar 2 Column Layout

In this two-column layout, the left column is a narrow sidebar. For a full page version that includes a header and footer see my left sidebar responsive layout.

The HTML

<r-c join>
    <c1-3 class="red">
        Left sidebar
    </c1-3>
    <c2-3 class="orange">
        Main content
    </c2-3>
</r-c>

We change colum widths by using different custom HTML tags, see a complete list of column sizes and the associated tags in the documentation.

The CSS

.red {
    background:#f97171;
}
.orange {
    background:#f99e50;
}

Right Sidebar 2 Column Layout

In this two-column layout, the right column is a narrow sidebar. For a full-page version that includes a header and footer see my right sidebar responsive layout.

The HTML

<r-c join>
    <c2-3 class="red">
        Main content
    </c2-3>
    <c1-3 class="orange">
        Right sidebar
    </c1-3>
</r-c>

The CSS

.red {
    background:#f97171;
}
.orange {
    background:#f99e50;
}

Love Heart 2 Column Layout

Create a two-column photo love heart design with creative border radius settings.

The HTML

<r-c join class="heart">
    <c1-2>
        <br>
    </c1-2>
    <c1-2>
        <br>
    </c1-2>
</r-c>

The CSS

.love-heart {
    margin:0;
    padding:1rem;
    min-height:100vh;
    background:#f97171;
}
.love-heart > :first-child {
    border-radius:50% 50% 0% 100% / 36% 26% 74% 64%;
    background-color:#fff;
    background-image:url(https://placeimg.com/640/480/people);
    background-size:cover;
    background-position:50% 50%;
}
.love-heart > :last-child {
    border-radius:50% 50% 100% 0% / 26% 36% 64% 74%;
    background-color:#fff;
    background-image:url(https://placeimg.com/640/480/animals);
    background-size:cover;
    background-position:50% 50%;
}

Note: I'm using PlaceIMG for random photos of people and animals as the column backgrounds. You can use whatever images you like.

Open Book 2 Column Layout

Create the illusion of an open book by skewing the left and right columns.

The HTML

<r-c join class="open-book">
    <c1-2>
        <!-- left page content -->
    </c1-2>
    <c1-2>
        <!-- right page content -->
    </c1-2>
</r-c>

The CSS

.open-book {
    margin:2rem 1rem 1rem;
    padding:1rem;
    background:#7e1010;
    border-radius:.3rem;
    gap:0;
}
.open-book > * {
    background:#fff;
}
.open-book > :first-child {
    transform-origin:100% 100%;
    transform:skew(0, 4deg);
}
.open-book > :last-child {
    transform-origin:0 100%;
    transform:skew(0, -4deg);
    background: linear-gradient(90deg, #eee 0%, #fff 100%);
}

Note: I'm using PlaceIMG for random photos of people and animals as the column backgrounds. You can use whatever images you like.

2 Column Layout With Semantic HTML5 Tags

This two-column layout uses semantic HTML5 tags.

The HTML

<article data-r-c data-join>
    <section data-c1-2 class="red">
        <!-- column 1 -->
    </section>
    <section data-c1-2 class="orange">
        <!-- column 2 -->
    </section>
</article>

The Responsive Columns system is compatible with semantic tags. Full details here: How to use semantic HTML tags with responsive columns.

The CSS

.red {
    background:#f97171;
}
.orange {
    background:#f99e50;
}

The Responsive Columns Layout System Is Simple And Powerful

You can easily change the widths of your columns and change how they respond to different screen sizes.

Refer to the Responsive Columns Documentation to see how easy it is to create responsive layouts to your exact requirements.