CSS fluid 'column'

Question

Whats the best way to get this layout in CSS? imagine that I have three divs, two divs inside another.. of the two inner divs, the first one has a specific width set, and the second div is expected to take up the remaining space.

Generally I'd end up setting a specific width on the second column, and manage updating this in the end that the containing div width changed.

If I float the fixed but not the fluid, the fluid column will wrap underneath the fixed div (not what is wanted).

+-------+  +--------------------------------------+
| fixed |  |                                      |
+-------+  |               fluid                  |
           |                                      |        
           |                                      |
           +--------------------------------------+

<div>
  <div>fixed</div>
  <div>fluid</div>
</div>

This has to be an entirely css solution, no javascript frameworks- and ideally works on most commonly used browsers with minimum 'hackage' (if at all).

Hope the ASCII art works,

Thanks.

Answer 1

the markup

<div id="fixed">fixed content</div>
<div id="fluid">fluid content</div>

the css

#fixed {
  float: left;
  width: 13em;
  margin-right: -14em;
}
#fluid {
  margin-left: 14em;
}

That should do the trick. I use it on my personal site. The margins make it all stay on the same level.

Answer 2

You can use Emastic CSS Framework that support fluid columns. Here Link is working example similar to your "ASCII art work" :)