Css - how to set three parallel divs?

Question

how to set three divs horizontally like this? Left width: 150 pixels, right width: 150 pixels, the center one width is the remaining pixels, and the middle one minimum width is 800 pixels. All divs need a position: relative. Thank.

Answer 1

Here we go, html 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 wrapper 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>