1

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/

Community
  • 1
  • 1
user1040259
  • 6,369
  • 13
  • 44
  • 62

3 Answers3

7

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%; }​
Community
  • 1
  • 1
Ana
  • 35,599
  • 6
  • 80
  • 131
  • +1: Really dig the first solution. Nice one Ana. – Jezen Thomas Sep 23 '12 at 23:32
  • thanks Ana. Question on your first solution. There's a little space on the bottom, underneath the pic (right column). Anyway we can get rid of that. Other than that, thank you! – user1040259 Sep 24 '12 at 01:10
  • 1
    ### Follow-up answer here: http://stackoverflow.com/questions/12558268/two-floating-divs-side-by-side-same-height-follow-up – user1040259 Sep 24 '12 at 03:04
1

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/

Gung Foo
  • 13,392
  • 5
  • 31
  • 39
1

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;
}​
Eric
  • 95,302
  • 53
  • 242
  • 374