Question

I’m kinda stuck on something… I’m trying to get #right to be the same height as #left but #right is fluid. How would I go about doing this?

 #container {
    width: 960px;
    margin: 0 auto;
}

#left {
    background: #ccc;
    float: left;
    padding: 10px;
    width: 160px;
}

#right {
    background: #ccc;
    float: right;
    padding: 10px;
    width: 750px;
}

–

<div id="container">
    <div id="left">
        test
    </div>

    <div id="right">
        test
    </div>
</div>

Thanks.

Answer 1

You can do this by applying a background image that’s simulates a 100% height #left:

HTML

<div id="container">
    <div id="left">
        test
    </div>

    <div id="right">
        test<br />test
    </div>​
</div>

CSS

#container {
    width: 960px;
    margin: 0 auto;
    background: url(http://www.dummyimage.com/180x1/ccc/ccc.png) repeat-y;
    overflow:hidden;
}

#left {
    background: #ccc;
    float: left;
    padding: 10px;
    width: 160px;
    height: 100%;
}

#right {
    background: #ccc;
    float: right;
    padding: 10px;
    width: 750px;
    height; 100%;
}​

Live Demo: http://jsfiddle.net/TqKMW/
More information about this trick: http://www.alistapart.com/articles/fauxcolumns/