Question

I have two elements with unknown width, one floated to the left, one to the right. Between them i have a block expanded to fit the container width.

The layout i want to achieve is this:

+---------------------------------------------+
| [Left] [Expanded                  ] [Right] |
+---------------------------------------------+

But the right-floated element is cleared to the next line:

+---------------------------------------------+
| [Left] [Expanded                          ] |
|                                     [Right] |
+---------------------------------------------+

It works fine if the elements are in this order in the HTML: Left, Right, Expanded.
But to be more semantic, i need this order: Left, Expanded, Right.

See this jsFiddle.

Is it possible? Even if wrappers are needed…

Answer 1

You can do it using display: table: http://jsfiddle.net/thirtydot/GpL5A/3/

HTML:

<div class="expandoooo">
    <span class="left">Left</span>
    <span class="expanded">Expanded</span>
    <span class="right">Right</span>
</div>​

CSS:

.expandoooo {
    background-color: lightgray;
    display: table;
}
.expandoooo > span {
    display: table-cell;
}

.left {
    color: red;
}
.expanded {
    background-color: black;
    color: white;
    width: 100%;
}
.right {
    color: blue;
}

A small downside of this technique is that the dying browser IE7 does not support display: table, though there is a JavaScript fix.