Link to the html page.

Screenshot:

Related posts:

1. CSS Equal Height Columns Pure CSS three columns equal height hack with and without background image, bottom border fix and many more. Please go through the full article for different phenomena of div based multi-columns layout with free html, jQuery, javascript, css source code and images....

Lately most web designers use DIV for page layout designing for its flexibility and robustness. Unlike table div has a big problem (in fact it’s the nature of div) when you want to give same height to multi-columns div based page layout, you can not do that very easily. I always used javascript for this purpose, but wished if I could do it with css, cos when the javascript is disabled the page layout will be not as expected in most of the cases.

Yes it is possible to create equal height columns with css! You can make the height of multiple floated divs equal using CSS only and no javascript or invalid css. Before beginning I assume you have adequate knowledge on HTML, CSS, javascript and you have already Firebug add-on installed on your Firefox :)

Lemme start from the beginning:

Default three column layout

Link to the HTML page

When you apply float left and fixed width to multiple adjacent divs, by default the layout looks like the above screen shot. You can see it from browser or have a look at the source code (html/css) on the following link above. You see as the contents are not same in the 3 divs, the height is different.
The next example is making the height of the 3 divs same using javascript (jQuery).

Three column layout – equal height using jQuery

Link to the HTML page

This is mostly and widely used for making equal height columns using javascript. I’ve used jQuery here. You may have a look at the source code from the link above.

$(function(){
	var H = 0;
	$("div").each(function(i){
		var h = $("div").eq(i).height();
		if(h > H) H = h;
	});
	$("div").height(H);
});

Now here comes the css equal height technique! The mantra is to use a large amount of bottom padding and the same amount of negative bottom margin to the floated divs and keep them inside an overflow hidden div. That’s all, and the magic happens!

Three column layout – equal height using pure CSS

Link to the HTML page

Let me get into details on how to do it. At First have a look at this link. Here I’ve used a huge amount (9000px) of bottom padding and the same amount of negative bottom margin (-9000px). But this makes the columns look so long and still not equal height at bottom. Now on this link I’ve used a holder div with overflow:hidden and that’s it, it is doing the magic by hiding the overflow section.

body{margin-bottom:50px}
div.holder { overflow:hidden }
div.holder div { float:left; width:30%; background-color:#9C0; margin-right:5px; padding:10px; padding-bottom:9000px; margin-bottom:-9000px }

Hope it’s clear now.

There is another method which use a background image with 1px height and color matched with the div’s bg color and body’s bg color. Please have a look at the html link, it’s self-explanatory.

Three column layout – equal height using pure CSS with Background Image

Link to the HTML page

Now I’ll try border to the columns and we’ll see the problem and it’s solution.

Three column layout – equal height with border

Link to the HTML page

Here you can see bottom border is missing which is obvious as we’ve used a huge bottom padding, from Firebug if you turn off overflow:hidden to the holder div and scroll down at the bottom of the page you’ll see the bottom border there but not equal height.
So how to solve this issue? There are 2 ways to do it – using a bg image in a tricky way or another pure tricky css hack.

Three column layout – equal height with bottom border fix using bg image

Link to the HTML page

Here I’ve used a 1px bg image for the background image and placed it at left-bottom of the bottom-border div with no-repeat and also applied 1px bottom padding. The holder div is inside the bottom-border div. Please feel free to play around with firebug!

This is the last method for bottom border fix without any bg image, just pure css.

Three column layout – equal height with bottom border fix using pure css and no bg image

Link to the HTML page

I’m not gonna explain the details of this last method, find it out yourself! :)

Related posts:

1. IE6 fix for select box over absolute positioned element The detailed instruction with css and jquery code for drop down menu over select box - fix for ie6....
2. Pure CSS Arrows CSS corner experiment using border attributes with html example page....