CSS Width Width for Center Column

Question

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

<div0>
    <div1></div1>
    <div2>fluid width</div2>
    <div3></div3>   
</div0>

given that div0, div1 and div3 have a fixed width, can you style the center of div2 , so it always has the width of the liquid (naturally, based on div0 the main wrapper)?

Answer 1

how can div 2 possibly have fluid width if div0 doesn't work. You can set div 2 to a fixed position, but this will lead to useless clutter. In any case, I assume it was a mistake, and you want div 0 and 2 to be fluid.

yes maybe

div1 3 . ( / ), .

1 2 3.

: http://jsfiddle.net/meo/H2LPJ/1/ , .

, , div2, , div : http://www.alistapart.com/articles/holygrail/ p >

Answer 2

: CSS

Answer 3

, - Ok, float weird marginins, , .

, flex css , display: table; , ( ) .

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>

Hide result

Hope someone help