Make left div take up remaining width without swapping elements

Question

I have 2 divs side-by-side. The right div has a fixed width. The left div should fill the remaining space even as the window is resized. Example:

+---------------------------------+  +---------------+
|                                 |  |               |
|             divLeft             |  |    divRight   |
|       <- dynamic width ->       |  |     120px     |
|                                 |  |               |
+---------------------------------+  +---------------+

<div>
    <div id="divLeft">...</div>
    <div id="divRight">...</div>
<div>

There's a solution that uses float:right on the right element but it requires reordering the elements like this:

<div>
    <div id="divRight" style="float: right; width: 120px;">...</div>
    <div id="divLeft">...</div>
<div>

Is there a solution that does not require reordering the elements? I'm in a situation where reordering them will cause other problems. I'd prefer a CSS/HTML solution to this but I am open to using Javascript/JQuery.

Here's a non-working JSFiddle of my attempt to solve it. I'm trying to position the blue div to the right of the green div.

Answer 1

While it doesn't work with <=IE7, display:table-cell seems to do the trick:

#divLeft {
    background-color: lightgreen;
    vertical-align: top;
    display:table-cell;
}
#divRight {
    display:table-cell;
    width: 120px;
    background-color: lightblue;
    vertical-align: top;
}

jsFiddle example

Answer 2

Is this the kind of thing? http://jsfiddle.net/KMchF/5/

#divLeft {
    float: left;
    overflow: hidden;    
    background-color: lightgreen;
    vertical-align: top;
    position: absolute;
    right: 120px;
}

#divRight {
    float: right;
    width: 120px;    
    background-color: lightblue;
    vertical-align: top;
}

I've added a clearing div after so you can carry on with the rest of the page as otherwise elements would be under the div { position: absolute; }