HTML/CSS: Expanding a float-left element to remaining width of parent

Question

For the life of me I can't figure this out. I have a container div with a specific width. And a few children div inside it. I want the last div to expand its width to fill in the remaining width left in the container. How can I do this?

Here's an example (also at http://jsfiddle.net/nbKAr/):

<div id="container">
    <div>a</div>
    <div>b</div>
    <div id="expandMe">expand me</div>
</div>​

#container {
    width:200px;
}

#container div {
    float:left;
}

Let's say the divs with "a" and "b" combine for a total width of 50px. How can I make #expandMe 150px without using JavaScript?

Answer 1

Can't be done without Javascript.

You may find some clever way to achieve the look visually, but there's no reliable way to do exactly what you describe.

Answer 2

Larsenal is right, this can't be done with div's. You can go old school and use a table, or just get a little more decisive and have the width's defined.