This is the fifth and final post 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 a layout with the header on the left, instead of across the top. Typically in this type of layout, the navigation is on the left as well. The Medium theme by Okay Themes is a good example of this style of layout.
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.
The HTML structure, the CSS reset, and the mobile styles are all the same as the second post in this series. Consequently, I will quickly show the code being used, but I won’t be explaining the code until we’ve moved beyond the code already covered in the other 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>Sidebar content...</p>
</div><!--.widget-->
</div><!--#secondary-->
</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 {
border: 1px solid #bbbbbb;
}
/* =Structure Mobile
-------------------------------------------------------------- */
.wrap{
max-width: 1140px;
margin: 0 auto;
padding: 1em;
}
.wrap:after {
content: "";
display: table;
clear: both;
}
#primary{
max-width: 720px;
margin: 0 auto;
}
#secondary{
max-width: 400px;
margin: 0 auto;
padding: 1em;
}
CSS Layout with Header on the Left
Here’s where things start to get interesting. Let’s start with the CSS for tablet sized devices. As you can see, the media query ensures that this CSS is only applied on screens with a width of 900px or more.
/* =Structure Tablet
-------------------------------------------------------------- */
@media screen and (min-width : 900px) {
#header{
top: 0;
left: 0;
width: 250px;
position: absolute;
}
body{
border-left: 250px solid #cccccc;
}
}
The #header that was previously displayed across the top of the site in previous tutorials is now positioned at the top left corner of the screen with a width of 250px. Also notice the “position: absolute;” which basically tells the other page elements to ignore this element when positioning themselves.
The body element is given a 250px wide left border with a background color to match the #header. This accomplishes two things:
- It moves the main site content 250px to the right. Without this, the upper left portion of the site content would sit behind the header because of the absolute positioning we used. This brings the site content out from behind the #header so it can be seen.
- It creates the illusion that the #header column stretches the full height of the site. Without the color, it would appear that the #header stopped at the end of the header content.
The easiest way to explain this is probably by example. Let’s start with absolutely positioned #header but no styles on the body element.
As you can see the page content is hidden, and needs to be moved to the right. There are a few ways this could be handled. We could add 250px of padding to the left of the body. However, that would place an empty white column below the header. We could change the background color of the body to match the color of the #header, but that background color would eventually show up on the right side of the page on larger screens. If we add a 250px left border to the body element without specifying a color, it looks like this:
This is better, since the content is readable and the dark column will not affect any other portions of the site. However, we can still improve on this by using same color for the border that we used for the background of the #header. With the border color in place, it should look like this:
Common Pitfalls
One of the common methods for making the left aligned header to appear as a complete column (even if it doesn’t have enough content) is to set it’s height to 100%. However, this only sets the height to 100% of the screen, not 100% of the page height. As soon as a visitor starts to scroll down the page, they scroll down past the bottom of the header and can see the visual break we were trying to avoid. Some sites try to counteract this by using “position: fixed” on the #header so that it never leaves the screen. When the visitor scrolls down the site, the #header appears to be fixed in place on the screen, and doesn’t scroll with the rest of the site. However, this is even worse than the visual problems of using “height: 100%;” because there is no guarantee that all the header content is visible on the screen. If the browser window isn’t tall enough to display the entire header content, there is no way to reach the bottom of the header.
Please note that using a colored border on the body element is not the only way to accomplish this layout. If the #header column requires a background image, using the border method we’ve covered here isn’t going to work. Instead, we would need to give the #page div a background image and a 250px left padding and then set the background of the #header to transparent. This would allow the background image of the #page div to show through. We would then need to limit either the width of the #page div or the repeat pattern of the background image so that the background doesn’t show up in other places where it isn’t needed.
Adding a Sidebar on the Right
The previous section was primarily focused on tablet sized screens. If you don’t need a sidebar, feel free to disregard this final section. However, I’ll continue the tutorial for those who want a sidebar on right for desktop sized screens. Here’s the CSS:
/* =Structure Desktop
-------------------------------------------------------------- */
@media screen and (min-width : 1140px) {
#main{
max-width: 1140px;
}
#primary{
float: left;
width: 65%;
padding-right: 1em;
}
#secondary{
float: right;
width: 35%;
}
#footer{
clear: both;
}
}
First, a maximum width for the #main element is set to prevent the content area and sidebar from growing too wide.
Then the #primary column is floated to the left and given a width of 65% to leave room for the sidebar. Finally, a right padding of 1em is added to prevent the content from touching the border of the sidebar. If you’ve read any of the other tutorials in this series, this should look familiar.
The #secondary div is floated to the right and given the remaining width of 35% and the footer is set to clear both to make sure it remains at the bottom of the site. When it all comes together, it should look something like this:
Disclaimer
This tutorial does not account for times when there is not enough content to fill the browser height. If the bottom of the footer ends before the bottom of the browser, the end of the #header column background will be visible as well.
The End
That concludes both today’s tutorial and the series on simple CSS layouts. As always, feel free to contact me via twitter or the contact form on this site if you have any questions, comments, or suggestions. Thanks!