How can I make the middle column div always expand to fit?

I have a basic layout that is one Div container wrapper and three columns Divs inside. I want the left and right column to be of fixed with, with the middle one being dynamic to fit it's open space.

Here's a picture to demonstrate what it looks like now:

The red border is the container, and the blue border div is the one I want to expand to stretch as wide as it can so the yellow div is always almost touching the right border of the parent.

Thanks!

#body
{
    border: 1px solid red;
    min-height:80开发者_Python百科0px;
    width:auto;
    margin-left:50px;
    margin-right:50px;    
}

#leftnavigation
{
    border: 1px solid green;
    min-height:500px;
    float:left;
    width:190px;
}

#contentarea
{
    border:1px solid blue;
    min-height:500px;
    float:left;
    width:auto;
    margin-left:5px;
    margin-right:5px;
}

#advertisingarea
{
    border:1px solid orange;
    width:150px;
    float:left;
    min-height:500px;
}

.advert
{

}

<div id="body">
        <div id="leftnavigation"></div>
        <div id="contentarea">sdfg<h1>asdasd</h1></div>
        <div id="advertisingarea">
            <div class="advert">
                <img src="../../Content/images/advertImage.png" alt="Advert" />
            </div>

            <div class="advert">
                <img src="../../Content/images/advertImage.png" alt="Advert" />
            </div>

            <div class="advert">
                <img src="../../Content/images/advertImage.png" alt="Advert" />
            </div>
        </div>
    </div>

---

Since display:table-cell is now universally supported in all modern browsers you might as well use that: http://jsfiddle.net/Lbpeh/1/

HTML

<div id="root">
    <div id="left">
        Left
    </div>
    <div id="middle">
        Middle
    </div>
    <div id="right">
        Right
    </div>
</div>

CSS

#root {
    display:table;
    border-spacing:0;
    width:100%;
    height:500px;
}
#root > div {
    display:table-cell;
}
#left {
    background:red;
    width:25%;
}
#middle {
    background:green;
}
#right {
    background:blue;
    width:100px;
}

Keep in mind that table-like layout has some issues of its own, but what you're essentially trying to achieve is the behaviour of tables with semantically more correct markup. That's what display:table-cell is for.

---

There are quite a few:

http://www.codeproject.com/KB/HTML/relatively_simple.aspx

http://www.tjkdesign.com/articles/3cols.asp

http://www.alistapart.com/articles/holygrail

3 columns layout via DIVs (middle-flexible, all flexible height, STRICT mode)