Easy equal height div without JavaScript possible?

Question

Easy equal height div without JavaScript possible?

I worked mainly with tabular layouts up to this point, but since he believed that there was nothing in the past, I took on the task of learning DIV based layouts.

One of the most annoying tasks for me is to figure out a way to get equal DIV heights that work with all major browsers, does not rely on JavaScript and does not require complicated CSS tactics . This makes me wonder why using the DIV is the preferred way to execute layouts, and tables allow you to quickly and easily create page elements with equal height.

What are my options? If there is no perfect way, would you recommend doing this with jQuery? I would like to apply this technique to the sidebar, which can be viewed here . (This is a test environment for the topic I'm developing.)

Update: the height of the columns is not known in advance; it depends on how much content it should match.

+3

html css

Pieter Sep 01 '10 at 10:05

source share

3 answers

here is an example using pure css

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 }