2

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

Community
  • 1
  • 1
eternicode
  • 6,805
  • 4
  • 33
  • 39

2 Answers2

0

I am not sure why the left column is flexible, but in that case I don't think you will have any luck doing it without javascript.

agrublev
  • 748
  • 1
  • 8
  • 22
  • `.tree` will contain a nested-`ul` tree representation. The `li`s' contents will be text. It's flexible to accommodate (and shrink-to-fit) whatever text is put in it (potentially up to a `max-width` if necessary, but so far it's not necessary). – eternicode May 08 '12 at 17:17
0

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

eternicode
  • 6,805
  • 4
  • 33
  • 39