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 | | | | | +---------------------------------+ +---------------+

...

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

...

``` 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.

Accepted Answer

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

Make left div take up remaining width without swapping elements

Solution

Problem

Related problems