Columns with the same height

Question

Using Columns of Same Height Using CSS CSS Browser Example

HTML:

<div id="container1"> <div id="col1">Column 1<br/>2</div> <div id="col2">Column 2</div> <div id="col3">Column 3</div> </div> 

CSS

 #container1 { float:left; width:100%; } #col1 { float:left; width:30%; background:red; } #col2 { float:left; width:40%; background:yellow; } #col3 { float:left; width:30%; background:green; } 

There are more complex demo pages, but I want to use the first example for my own purposes. Why does this example not work?

http://jsfiddle.net/YryJM/2/

Answer 1

The easiest way to make columns with the same height is display: table .

 #container1 { display: table; width:100%; } #col1, #col2, #col3 { display: table-cell; } #col1 { width:30%; background:red; } #col2 { width:40%; background:yellow; } #col3 { width:30%; background:green; } 

http://jsfiddle.net/YryJM/3/

Answer 2

Maybe this will work? by setting the fixed height of the div container and then setting the col divs to 100%?

 #container1 { float:left; width:100%; height:50px; } #col1 { float:left; width:30%; background:red; height:100%; } #col2 { float:left; width:40%; background:yellow; height:100%; } #col3 { float:left; width:30%; background:green; height:100%; } 

Example http://jsfiddle.net/squinny/dps4f/1/

idk if this helps you or not?