CSS fluid width for a center column

I have nested divs like this (pseudo code..)

<div0>
    <div1></div1>
    <div2>fluid width</div2>
    <div3>&l开发者_运维百科t;/div3>   
</div0>

given that div0, div1 and div3 have fixed width, it is possible to give a style to the center div2 so always has fluid width (of course based on div0 main wrapper)?

how could div 2 possibly have a fluid width if div0 does not. You could set div 2 to position fixed but this would reult in a unusable mess. Anyway I assume it was an error and you want div 0 and 2 to be fluid.

yes it is possible

just set the with of div1 and 3 as padding left and right on the container. And use a negative margin (or left/right value) to set them in the right place.

Float the divs 1 2 and 3 left.

edit

here is an example: http://jsfiddle.net/meo/H2LPJ/1/ well its a little more complicated then my explenation.

Oh and i assume your content is in div2 so it would more semantic to plcae this div first in the content: http://www.alistapart.com/articles/holygrail/

Good multi-column layouts examples: Float-less CSS layout

I came up against this problem and whilst the agreed solution is Ok it relies on float and weird margins which are not so good when you want more than one row.

I suggest that whilst the flex css directive is still way too bleeding edge for production yet you could use display:table; to give you what you (and I) needed.

here is the jsfiddle

.results {
  display: table;
  width: 100%;
  table-layout: fixed;
}
.datarow {
  display: table-row;
}
.datarow div {
  display: table-cell;
}
.left {
  background: blue;
  width: 150px;
  color: white;
}
.center {
  width: 100%
}
.right {
  background: red;
  width: 120px;
  color: white;
}

<div class="results">
  <div class="datarow">
    <div class="left">This box has a fixed width of 150px</div>
    <div class="center">This box is flexible</div>
    <div class="right">This box has a fixed width of 120px</div>
  </div>
</div>

Hope that helps someone