css-how to set a three parallel DIV?

Question

how to set three div arranged horizontally like this? The left one width:150px, the right one width:150px, the center one width are the rest of the pixels, and the center one min-width will be 800px. All the div need a position:relative. Thanks.

Answer 1

Here we go, html is below:

<div id="wrap">

   <div class="left"></div>
   <div class="center"></div>
   <div class="right"></div>

   <div class="clearBoth"></div>

</div>

and now css below:

#wrap {
width: auto;
position: relative;
}

.left, .right {
width: 150px; //or use 30%
float: left;
}

.center {
float: left;
min-width: 800px; //or use 60%
width: auto;
position: relative;
}

.clearBoth {
clear: both;
}

Answer 2

Use a wrap if you want to define a fixed maximum width.

.wrap {
  overflow:hidden;
  width:1200px; /* Optional */
}

.left {
  float:left;
  width:150px;
}

.middle {
  float:left;
  min-width:800px;
}

.right {
  float:left;
  width:150px;
}

<div class="wrap">
  <div class="left">Left</div>
  <div class="middle">Middle</div>
  <div class="right">Right</div>
</div>