This is the third 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 when both sidebars are on the same side. Sidebars split out on each side of the main content are covered in the next tutorial.
As I mentioned at the beginning of the first post in this series:
- 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.
- 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.
HTML Structure
Here’s a quick look at the simplified HTML structure. If you already read the post on two column layouts, you’ll notice that the only addition is the #tertiary div.
<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
We’ll use the same CSS reset as explained the previous tutorials.
/* =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
Once again we’ll start with the mobile styles first and work our way from there to tablets and finally to desktops. First let’s add some color so we can tell all the elements apart.
/* =Color
-------------------------------------------------------------- */
#header{
background: #cccccc;
}
#main{
background: #dddddd;
}
#secondary .widget,
#tertiary .widget{
border: 1px solid #bbbbbb;
}
As you can see, the #header and #main divs now have background colors and each .widget div in the #secondary and #tertiary columns gets a border. Now let’s move on to the actual structure.
/* =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;
}
Now that we’re dealing with three columns, we can spread everything out a little further than we did in previous tutorials. For example, the .wrap divs now have a max-width of 1400px. On screens larger than 1400px, they are centered due to the “auto” setting of the margin. The “.wrap:after” applies the clearfix hack covered in the two column layout tutorial. The #primary and #secondary columns are still centered just as they were in the two column layout, but now the #tertiary column has been added as well. Each widget has a padding of 1em to prevent the text from touching the widget border we added in the color section, and a margin-bottom of 1em to prevent the widgets from touching each other. On mobile devices it should look like this:
Two Column Layout for Tablets
As the screen width increases and we reach common tablet size, we can move the sidebars up from the bottom of the page over to the right side of the page. The page isn’t wide enough yet for the sidebars to sit side-by-side, so they’re stacked one on top of the other next to the #primary page content div.
/* =Structure Tablet
-------------------------------------------------------------- */
@media screen and (min-width : 900px) {
#primary{
float: left;
width: 65%;
padding-right: 1em;
}
#secondary,
#tertiary{
float: right;
clear: right;
width: 35%;
}
}
The #primary content column is floated to the left and the padding-right is set to 1em to ensure that the page content doesn’t touch the sidebar. The #secondary and #tertiary columns are both floated to the right and “clear” is set to “right” to force them to display one after another in a vertical manner. It should look something like this:
Three Column CSS Layout
Finally, for any screens with a width of 1140px or more, we can display the full three column layout.
/* =Structure Desktop
-------------------------------------------------------------- */
@media screen and (min-width : 1140px) {
#primary{
width: 50%;
padding-right: 0;
}
#secondary,
#tertiary{
float: left;
width: 25%;
padding-left: 1em;
}
}
The #primary column now has a width of only 50% because the layout has gotten so wide. The #secondary and #tertiary columns are both floated to the left now with a width of 25% each so that they can sit next to each other instead of stacked on top of one another. Also notice that the padding-right has been removed from the #primary column and padding-left has been added to the #secondary and #tertiary columns. This keeps the sidebars from touching each other while still keeping an equal width. It should come out looking like this:
Switch Sidebar Location
If we wanted to move the sidebars to the left and place the #primary content column on the right, we would just need to modify the media query sections float things in the opposite direction and adjust the padding accordingly.
/* =Structure Tablet
-------------------------------------------------------------- */
@media screen and (min-width : 900px) {
#primary{
float: right;
width: 65%;
padding-left: 1em;
}
#secondary,
#tertiary{
float: left;
clear: left;
width: 35%;
}
}
/* =Structure Desktop
-------------------------------------------------------------- */
@media screen and (min-width : 1140px) {
#primary{
width: 50%;
padding-left: 0;
}
#secondary,
#tertiary{
float: right;
width: 25%;
padding-right: 1em;
}
}
Thanks for reading. I hope this has been helpful. Next time I’ll cover three column layouts with split sidebars, one on each side of the #primary content area. Until then, feel free to use the contact form on this site if you have any questions about anything I’ve covered.