Question

This question is basically a fork of Expand div to take remaining width, with a crucial difference: I want the columns to have different source and display orders.

Source order:

<div class="view">View</div>
<div class="tree">Tree</div>

Display order:

------------------
| Tree | View    |
------------------

Restrictions:

• .tree has variable-width content; it should shrink to its content, while .view takes up the remaining width.
• Columns will have variable heights, too, so there’s no room for negative margin-top trickery.

JSFiddle: http://jsfiddle.net/UrXdw/

Is this possible to do in pure CSS? Target browsers are modern browsers and IE8+.

Answer 1

I tried several approaches to this problem, and my conclusion is that it’s not possible.