Does anybody know how to match a 2-3 columns of same height in a layout using only CSS with regards to which columns has more content?

 

Without using a background image or Javascript? Has anyone done this before in their project or what website?

Does anybody know how to match a 2-3 columns of same height in a layout using only CSS with regards to which columns has more content?

 

Without using a background image or Javascript? Has anyone done this before in their project or what website?

 

Create <div /> around the the columns with the overflow set to hidden (overflow: hidden;).

 

Add padding to the bottom of each column 2000px should do it (padding-bottom: 2000px;).

Remove what you have padded with the margin (margin-bottom: -2000px;),

 

Using inline styles, it would look like this:

 

<div style="overflow: hidden;">
<div style="padding-bottom: 2000px; margin-bottom: -2000px;">
	 This is some content.
</div>

<div style="padding-bottom: 2000px; margin-bottom: -2000px;">
	 This is some content. This is some content. This is some content. This is some content. This is some content. This is some content.
</div>


<div style="padding-bottom: 2000px; margin-bottom: -2000px;">
	 Hello.
</div>
</div>

 

That should do it, let me know how you get on.

 

Chris.

Great! Sure I will, Thanks Chris.

I tried your code but it only works in Firefox not in IE.