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 auto setting the height of my containerLeft div (red background) the same height as my containerRight div. I specifically want this to stay a fluid grid.

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

Answer 1

If you know that one of the two columns is always going to be taller than the other, then you can do something like this:

demo

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

HTML:

<div class='container'>
    <div class="containerLeft">
        <h2>1.</h2>
        <p>First, let's 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 for sure which one of them is going to be taller, then you can simulate the fact that they are of equal height by using a background gradient on their parent.

demo

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 don't work in IE9 and older, so if you want a solution for IE8+, then you can try this

demo

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 taken out of the "normal flow". that means the CSS interpreter has no idea about the size of the parent, so setting the height cannot be done "automatically", you will have to set a height manually.

This update to your fiddle should make things clear: http://jsfiddle.net/s7ufg/1/

Answer 3

You can clip the bottom off one 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;
}​