Source code on GitHub
First things first, here is the source code.
View project on GitHubIntroduction
In this tutorial I'll show you how to create responsive full height columns using the "faux columns" technique.There are 3 main concepts in that:
- Full/Equal height: When you float an element, its height is equal to its content; not to its "context". This causes a problem if you want a sidebar that has a different background-color than the main area because the background will not extend to the same height as the other column(s).
- Faux column technique: This is a technique that uses a background-image to create an effect that looks like the column extends to the full height. This technique has been documented several times but this article is a bit different because of the following point.
- Responsive: With responsive design, the width of the page set to a fixed size (such as 960px). Instead the content of the page adapts as your make your browser window wider or narrower.
The HTML:
The page has a header div, a main div and a footer div. The main div has an article div and a sidebar div on the right side.<body> <div class="page"> <div> header </div> <div class="main clearfix"> <div class="article"> Main content </div> <div class="sidebar"> sidebar </div> </div> <div> Footer </div> </div> </body>
The CSS:
1 - Define the clearfix class to help us clear the float.
There are several ways to clear floats. The technique I use here it the one used in the HTML 5 Boilerplate project. See this blog post to learn about that specific technique..clearfix { *zoom: 1; } .clearfix:before, .clearfix:after { display: table; content: ""; } .clearfix:after { clear: both; }
2 - Define the two columns using a 70/30 ratio.
.article { float:left; width:69%; padding-right:1%; overflow:hidden; } .sidebar { float:right; width:28%; padding-left:1%; padding-right:1%; overflow:hidden; }
Setting the overflow to hidden is not mandatory but I think it looks better when you resize the browser so small that content cannot be wrapped.
3 - Add the faux column effect by setting a background image
This is the key part..main { background: url(opaque-0.70-5000.png) repeat-y 70% top; }
Note that:
- The background image is set for the main div; not the sidebar div.
- The background image is 5000px wide by 1px high.
- The width of the image determines the maximum width that your page will support; beyond that point the faux column effect will break (you can use a larger image if you want but 5000px is really wide).
- The height of the image does not matter. If you use an opaque color, then 1px is enough. If you want to use a pattern then you can use a taller image.
- In the image, the column start at 70% of the width of the image, at pixel 3500 (5000 * 0.7 = 3500).
- The 70% value in the css is the position of the image. Use the same value as the ratio.
.main { background: url(line-0.70-3000.png) repeat-y 70% top; }
4 - Set a max width for page and add some spacing
As stated in the previous step, the width of the image determines the maximum width the page support. To ensure it will not break beyond that point I set a max-width on the page div. If you don't like the way your site looks when it is very wide, you can set a max-width of 1600px (that's what I usually do)..page { width:75%; margin:auto; max-width:5000px; }
5 - Responsive with media queries
You can use css media queries to change the ratio of the columns based on the browser width and for the faux column to work, you will have to change the background image too. For example, if you want a 75/25 ratio when the page is narrower than 600px, you have to:- Create a background-image with a ratio of 75/25. For a 600px wide image, the column must start at pixel 450 (6000 * 0.75 = 450).
- Add media query, change background-image and change the column ratio:
@media screen and (max-width: 600px) { .page { width:95%; margin:auto; max-width:600px; } .main { background: url(opaque-0.75-600.png) repeat-y 75% top; } .article { float:left; width:74.5%; padding-right:0.5%; } .sidebar { float:right; width:24%; padding-left:0.5%; padding-right:0.5%; overflow:hidden; } }
Conclusion
I learned a lot in the process of writing this post. I don't consider myself an expert on the matter. Don't hesitate to leave comments if you think the solution can be improved and I will update the post accordingly.Don’t forget that you can browse the code on GitHub.
