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

Question

So here is a picture:

What the problem is that I have 2 divs in a container div. The container div expands in height as nessiscary and so do the 2 inner divs. The right div has a border-left... but if it is empty it will not fill the entire height.... how do I do this?

Answer 1

The problem you're talking about is called "faux columns" and have been reported and described well over past few year :) http://www.alistapart.com/articles/fauxcolumns/

There are several solutions:

• use background on the containing div which will imitate the border
• use CSS3 techniques (display:table and display:table-cell, but these are not really meant for this or CSS3 flexbox which is highly experimental and probably won't work in most browsers)
• use JS to set the column height to the maximum of heights of the elements

The last solution is quite good so if you're using jQuery then it could be achieved like that:

var max=0;
$('#container').children().each(function(){
    if($(this).height()>max) max = $(this).height();
});
$('#container').children().each(function(){
    $(this).height(max);
});

The script iterates through all children of the container and finds the highest element. Then it iterates again and sets the maximum height to each of them.

Answer 2

HTML

<div class="wrapper">
    <div class="child_1">First Div content goes here</div>
    <div class="child_2">Second Div content goes here</div>
</div>

CSS

.wrapper {
        width: 960px;
        overflow: hidden;
        margin: 0px auto;
    }

    .child_1, .child_2 {
        padding-bottom: 9999em;
        margin-bottom: -9999em;
        width: 50%;
        float: left;
    }

    .child_1 {
        background: #f00;
    }

    .child_2 {
        background: #0f0;
    }

Answer 3

Try adding a border-right to the left div. Add a div inside the container div with a clear class. Then in css add this: .clear{clear:both;}

Answer 4

This is what you're looking for...

http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

---

Also, I'm assuming you're using float, so I highly recommend you give this a read:

http://coding.smashingmagazine.com/2007/05/01/css-float-theory-things-you-should-know/

... remember to clear your floats!