Two floating divs side by side, same height

Question

Possible duplicate:
2 divs in a larger div must equal the same height ... but how?

I'm having trouble automatically setting the height of my Container Left div (red background) to the same height as my containerRight container. I specifically want this to remain a fluid grid.

jsfiddle here: http://jsfiddle.net/s7ufg/

Answer 1

If you know that one of the two columns will always be higher than the other, then you can do something like this:

demonstration

Just give position: absolute to the shorter column and stretch it from top: 0 to bottom: 0 .

HTML

 <div class='container'> <div class="containerLeft"> <h2>1.</h2> <p>First, let play a video.</p> </div> <div class="containerRight"> <img src="http://tctechcrunch2011.files.wordpress.com/2012/09/michael-headshot-red.jpg?w=288" /> </div> </div>​ 

CSS

 .container { position: relative; } .containerLeft { /* shorter column */ position: absolute; top: 0; bottom: 0; left: 0; width: 38%; padding: 2%; background-color: crimson; } .containerRight { /* taller column */ margin: 0 0 0 42%; width: 58%; background: dodgerblue; }​ 

---

If you don’t know exactly which one will be higher, you can simulate the fact that they are equal to height using a gradient background for your parents.

demonstration

HTML is the same, CSS becomes:

 .container {  overflow: hidden;  background: -webkit-linear-gradient(left, crimson 42%, dodgerblue 42%);  background: -moz-linear-gradient(left, crimson 42%, dodgerblue 42%);  background: -o-linear-gradient(left, crimson 42%, dodgerblue 42%);  background: linear-gradient(left, crimson 42%, dodgerblue 42%); } .containerLeft, .containerRight { float: left; } .containerLeft {  width:38%;  padding: 2%; } .containerRight { width: 58%; }​ 

---

However, CSS gradients do not work in IE9 and later , so if you want a solution for IE8 +, you can try this

demonstration

which uses :before and :after pseudo-elements .

 .container { overflow: hidden; position: relative; } .container:before,.container:after { position: absolute; z-index: -1; top: 0; bottom: 0; content: ''; } .container:before { left: 0; width: 42%; background: crimson; } .container:after { right: 0; width: 58%; background: dodgerblue; } .containerLeft, .containerRight { float: left; } .containerLeft { z-index: 2; width:38%; padding: 2%; } .containerRight { width: 58%; }​ 

Answer 2

The problem with floating divs is that they are pulled out of the "normal stream". this means that the CSS interpreter has no idea about the size of the parent, so setting the height cannot be done “automatically”, you will need to set the height manually.

This update of your violin should make it clear: http://jsfiddle.net/s7ufg/1/

Answer 3

You can copy the bottom from a single column: http://jsfiddle.net/gtGjY/

I added:

 .containerLeft { padding-bottom: 1005px; margin-bottom: -1000px; } .outer { overflow: hidden; } /* div around both columns */ .containerRight img { display: block; }​