I have two DIVs that are floated to the left:

CSS:

#contentLeft {
    float: left;
    text-align: left;
    width: 185px;
}

#contentRight {
    float: left;
    text-align: left;
    padding-top: 10px;
    padding-right: 20px;
    padding-bottom: 20px;
    padding-left: 35px;
    width: 339px;
    border-left-color: #00B3BE;
    border-left-style: solid;
    border-left-width: 1px;
}

HTML:

<div id="contentLeft">
</div>
<div id="contentRight">
</div>

The heights of these two DIVs varies across pages - sometimes the contentLeft is longer, sometimes contentRight is longer.

I need the heights to adjust to each other and fill the available space so that I can properly apply a border and/or background color to each and have it extend the full length of each DIV.

How can I do this (cross-browser compatible)?

4 answers

1
point

This is an old trick, but it's still the method I would use to achieve what you're describing: Faux Columns.

It works best with a background color, but I think it could be adapted to add a border effect if that's what you need.

Answered over 6 years ago by Paul Farnell
1
point

There are handful of techniques, including Faux Columns that are mentioned in a Smashing Magazine article from earlier this year:

Answered over 6 years ago by Tom Lambert
Steve 5
0
points

I think using Javascript to equalise the heights is the simplest solution - as long as you don't mind relying on JS being enabled:

Something like: http://buildinternet.com/2009/07/four-methods-to-create-equal-height-columns/

Answered over 6 years ago by Steve
0
points

There's a jQuery plugin that handles the problem you describe for multiple div elements:

http://desandro.com/resources/jquery-masonry/

Answered over 6 years ago by Tony Crockford