December 01, 2008

Simple yet perfect 2 column layout

Article about ▸

Lazy
CSS

Read comments ‣ (1)

written by Marek Foss

Your probably have seen the Matthew James Taylor perfect liquid layouts. They are really good and I recommend them, but sometimes they are just overcomplicated for the task. This blog template uses a simplified version of 2 column layout that I came up with while working on it. It’s lazy compatible and here’s how it looks like.

Let’s assume you wish to have page that is 100% wide, with a top and bottom bar across it, and 2 columns in the middle. So you could code it in HTML as follows:

...
<body>
	<div id="header"></div>
	<div id="content">
		<div id="col_left"></div>
		<div id="col_right"></div>
	</div>
	<div id="footer"></div>
</body>
...

Now the appropriate CSS for that to work as a simple 2 column liquid layout is like that:

div#header {
	position: relative;
	width: 100%;
	clear: both;
}

div#content {
	position: relative;
	width: 100%;
}

div#col_left {
	float: left;
	width: 50%;
}

div#col_right {
	float: right;
	width: 50%;
}

div#footer {
	position: relative;
	width: 100%;
	clear: both;
}

Essentially, a div that you wish to be a single column has to be style with clear: both property and positioned relatively. While the 2 columns have to be floated left and right, and have to have the width property explicitly defined. The result of the above code looks like that:

Simple 2 column liquid layout

The good thing is that you can nest another 2 columns inside one of the columns, on and on again (like on this blog, the articles and the Twitter feed are on 2 different columns, while the categories and comments links under the article are again in 2 different columns). You can simplify the given code further by making a general class for the single column elements, with position, clear and width defined.

Download the HTML file to play with the code.

If you liked the article, please spread the word and share it!

Comments

Yeorwned writes:

14/10/09 at 22:18

Very far from perfect. You’ve completely left out the major height issue with this CSS. Change the content length of the left or right column and they magically become fail to stretch, making borders and backgrounds useless.