How can I stretch an empty floating div to the full height available using css?

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?

perhaps http://stackoverflow.com/questions/2331717/css-how-to-make-left-float-div-to-adjust-height-dynamically will help? — amaters, Apr 26 '12 at 12:53
Why over complicate it. You could simply give each div a specified height. Then they will be the same. — Spencer May, Apr 26 '12 at 12:55
@SpencerMay The content frame height is dynamic, and can vary greatly — Rachel, Apr 26 '12 at 12:57
So [this solution](http://jsfiddle.net/GrYU4/) won't work? Oh well, back to the drawing board. — Mr Lister, Apr 26 '12 at 13:00
@MrLister No, it doesn't work if the right content frame exceeds the screen height — Rachel, Apr 26 '12 at 13:03

David Thomas · Accepted Answer · 2012-04-26T13:06:47.100

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.

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) — Rachel, Apr 26 '12 at 13:00
Your edited response worked perfectly for me, thank you so much for your help :) — Rachel, Apr 26 '12 at 13:12
You're very welcome; I'm glad to have *been* of help (...eventually)! =) — David Thomas, Apr 26 '12 at 13:13

score 0 · Answer 2 · answered Apr 26 '12 at 12:54

0

It's kind a complex problem. Here you have an article about it: http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

answered Apr 26 '12 at 12:54

How can I stretch an empty floating div to the full height available using css?

2 Answers2