CSS positioning - Rezising div to other div

Question

<div id="container" style="width:300px;">
   <div id="leftBar" style="display: inline-block; width: 200px;">
       //explanding text ... bla bla bla
   </div>
   <div id="rightBar" style="display: inline-block; width: 100px;">
       //this bar has a background image that should stretch to a the left bars HEIGHT
   </div>
</div>

I'd like the rightBar to expand with the leftBar. I can't use a fixed value because leftBar includes text that varies in length. rightBar should be equal in height to leftBar.

Answer 1

You can change the markup slightly and end up with this HTML:

<div id="container">
    <div id="leftBar">
        <div id="rightBar">
            This is your 'rightBar'
        </div>
        <p>Many paragraphs of text</p>
        <p>Many paragraphs of text</p>
        <p>Many paragraphs of text</p>
        <p>Many paragraphs of text</p>
        <p>Many paragraphs of text</p>
        <p>Many paragraphs of text</p>
        <p>Many paragraphs of text</p>       
        <p>Many paragraphs of text</p>
        <p>Many paragraphs of text</p>
        <p>Many paragraphs of text</p>
    </div>
</div>​​​

and this CSS:

#container {
    width: 300px;
    background-color: yellow;
    overflow: hidden;
}

#leftBar {
    position: relative;
    width: 200px;
    background-color: green;
    padding-right: 100px;
}

#rightBar {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100px;
    background-color: red;
    *height: expression(document.getElementById('container').offsetHeight); /*ie6 hack*/
}

This should work perfectly. Check it out.