CSS fluid 'column'

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.

From stackoverflow

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

  meandmycode : Perrrrrfect, many thanks!

  Ben Blank : This is one of the core techniques of the so-called "Holy Grail" layout and has proven to be robustly cross-browser.

• Hopefully this at least helps you get started:

  
  * {
  margin:0;
  }
  
  
  div#wrapper {
  margin:0;
  height:auto !important; //IE Hack
  height:100%; //IE Hack
  min-height:100%;
  overflow:auto
  }
  
  div#fixed{
  float:left;
  position:absolute;
  background-color:red;
  margin:0;
  height:200px;
  width:200px
  }
  
  div#fluid{
  float:right;
  position:absolute;
  left:200px;
  background-color:blue;
  display:block;
  height:80%;
  width:60%
  }
  

  The "wrapper" would be your wrapping div. I only set the fluid column to a width of 60% so you could see that it should act fluidly. I tested this in Opera 10, IE 6, and Firefox 3 with only minor problems. IE wants to append an extra 200px to the right if you set the width of the fluid column to 100%. I'm sure there is a work around for this somewhere. I hope this gets you started!

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