Simple Three Column CSS Layout (Split Sidebars)

January 16, 2014

This is the fourth in a series of posts detailing how to set up basic responsive page structures using CSS. In this post, I will be covering how to handle three column layouts with one sidebar on each side of the main content area. Layouts with both sidebars on the same side were covered in the last tutorial.

As I mentioned at the beginning of the first post in this series:

  1. The HTML structure will be coming from the Solum starter theme I released last week. Solum doesn’t contain any layout markup, so it gives a clean starting point.
  2. I will not be including menus in these tutorials. For examples of how to handle menus in responsive design, I would suggest taking a look at the mo.js project.

Many aspects of this post will be the same as the three column layout tutorial I posted yesterday with the sidebars grouped together on one side instead of split apart. Actually, the only thing different will be the CSS for desktop screens. Because of this, I’m just going to show the code up until that point. If you want an explanation of what it does, please read yesterday’s Three Column CSS Layout (Sidebars Together) post.

HTML Structure

<body>
    <div id="page">
        <div id="header" class="site-header">
            <div class="wrap">

                <div id="branding" role="banner">
                    <p class="site-title"><a href="http://example.com">Site Title</a></p>
                    <p class="site-description">Just another WordPress site...</p>
                </div><!--#branding-->

            </div><!--.wrap-->
        </div><!--#header-->

        <div id="main">
            <div class="wrap">

                <div id="primary">
                    <div id="content" role="main">
                        <p>Article content...</p>
                    </div><!--#content-->
                </div><!--#primary-->

                <div id="secondary">
                    <div class="widget">
                        <p>Main sidebar content...</p>
                    </div><!--.widget-->
                </div><!--#secondary-->

                <div id="tertiary">
                    <div class="widget">
                        <p>Additional sidebar content...</p>
                    </div><!--.widget-->
                </div><!--#tertiary-->

            </div><!--.wrap-->
        </div><!--#main-->

        <div id="footer" class="site-footer">
            <div class="wrap">

                <p class="site-credits">© Copyright owner</p>

            </div><!--.wrap-->
        </div><!--#footer-->

    </div><!--#page-->
</body>

CSS Reset

/* =Reset
-------------------------------------------------------------- */

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin-top: 0;
}

html,
body,
div{
    margin: 0;
    padding: 0;
}

Single Column Layout for Mobile

/* =Color
-------------------------------------------------------------- */

#header{
    background: #cccccc;
}

#main{
    background: #dddddd;   
}

#secondary .widget,
#tertiary .widget{
    border: 1px solid #bbbbbb;
}

/* =Structure Mobile
-------------------------------------------------------------- */

.wrap{
    max-width: 1400px;
    margin: 0 auto;
    padding: 1em;
}

.wrap:after {
    content: "";
    display: table;
    clear: both;
}

#primary{
    max-width: 720px;
    margin: 0 auto;
}

#secondary,
#tertiary{
    max-width: 400px;
    margin: 0 auto;
}

#secondary .widget,
#tertiary .widget{
    padding: 1em;
    margin-bottom: 1em;
}

Two Column Layout for Tablets

Since there isn’t really room for 3 columns at the tablet level (unless you want really narrow columns), we’ll just put both sidebars on the right, like we did in the previous tutorial.

/* =Structure Tablet
-------------------------------------------------------------- */

@media screen and (min-width : 900px) {
    #primary{
        float: left;
        width: 65%;
        padding-right: 1em;
    }

    #secondary,
    #tertiary{
        float: right;
        clear: right;
        width: 35%;
    }
}

Three Column CSS Layout with Split Sidebars

Okay, now we can get down to business. We’ll start with the code. Notice the media query that ensure the code only runs on browsers wider than 1140px.

/* =Structure Desktop
-------------------------------------------------------------- */
/*
@media screen and (min-width : 1140px) {
	#primary{
		float: left;
		margin-left: 25%;
		width: 50%;
		padding: 0 1em;
	}

	#secondary{
		float: left;
		margin: 0 0 0 -75%;
		width: 25%;
		clear: none;
	}

	#tertiary{
		float: right;
		width: 25%;
		clear: none;
	}
}

The #primary column that holds the main content is floated to left, but given a left margin of 25% to leave room for the left sidebar. It has a width of 50% so that it leaves another 25% for the right sidebar. Finally, it is given some padding so that the text in the #primary column doesn’t touch the borders of the sidebars.

The #secondary sidebar div is floated to the left and given a negative left margin of -75% to bring it back across the #primary column and position it against the left side of the screen. It has a width of 25% so that it fits in the 25% margin left by the #primary div. Finally, “clear: none;” is added to overwrite the “clear: right;” from the tablet layout.

The #tertiary sidebar div is floated to the right and given a width of 25% to fit in the remaining space not taken up by the #primary and #secondary columns. Once again, “clear: none;” is added to overwrite the “clear: right;” from the tablet layout.

Here’s what it should look like on the desktop.

Three column split sidebars screenshot

That’s all for today. This series will wrap up tomorrow with a tutorial on placing the header in it’s own column, rather than sitting across the top of the page. As always, feel free to use the contact form if you have any questions. Thanks!