Question

I have two floating divs next to each other, and want the left one to stretch to whatever size the right one is. Is this possible with css alone?

<div class="page">
    <div class="left-sidebar">
    </div>
    <div class="right-content">
    </div>
</div>

.left-sidebar
{
    background: url('ImageUrl') no-repeat right top #F8F1DB;
    float: left;
    width: 203px;
    min-height: 500px;
    height : auto;
}

.right-content
{
    background: #F8F1DB;
    margin-left: 203px;
    min-height: 477px;
}

It ends up looking like this:

-------------------
|    |            |
|    |            |
|    |            |
|    |            |
|    |            |
-------------------

The left sidebar frame has a background image, and should stretch to whatever height the content frame does, however I am having problems making that happen.

Is there a cross-browser way to make the left-sidebar div stretch the same height as the right-content frame using css only?

Answer 1

The best I could come up with is to use position: absolute on the .left-sidebar element:

.page {
    position: relative; /* causes the left-sidebar to position relative to this element */
}

.left-sidebar {
    position: absolute;
    top: 0;
    bottom: 0;  /*  this line, and the one above, confer full-height */
    left: 0;
    width: 30%;
    background-color: #f90; /* adjust to taste, just to see where the element was rendered */
}

​.right-content {
    background-color: #f00; /* again, adjust to taste, was just to see where elements were rendered */
    margin: 0 0 0 35%; /* stops the sidebar showing 'above' the content, and gives a 5% gutter between */
}​

JS Fiddle demo.

---

Edited in response to comment below:

There is a header and some space on either side of the floating divs, so I don’t know the actual top/left/bottom positions to use. Also, if the right content frame stretches longer, the left sidebar frame doesn’t stretch with it (add height: 500px to the right content frame of your fiddle).

Unfortunately the only other alternative that I can see is to move the .left-sidebar element within the .right-content element, and then the following works. This may not be possible with your use-case, though.

.left-sidebar {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 30%;
    background-color: #f90;
}

.right-content {
    position: relative;
    background-color: #f00;
    margin: 0;
    padding: 0 0 0 35%;
}​

JS Fiddle demo.