Question

http://jsfiddle.net/CApW2/

I can’t get it done the right way, left and right div are two images and center is a repeat-x div.
Left and right div must be fixed width and height, center div fixed height but stretched width.

Answer 1

This can be either fixed or fluid height. Left and right columns are fixed width, while the center column is fluid. In the source, the side columns are asides, and after the center column. While you can style each column directly, be careful when editing width/padding/margin/border… you have to make multiple changes in the CSS for each one (but it’s grouped and commented fairly well, so you shouldn’t have too much trouble).

The CSS:

<style>
.two-col {
 overflow:hidden;
}
.two-col > aside {
 position:relative;
 float:left;
 width:250px;
 padding-bottom:10000px;
 margin-bottom:-10000px;
}
.two-col > div {
 position:relative;
 float:left;
 width:100%;
 padding-bottom:10000px;
 margin-bottom:-10000px;
}
.two-col.right {
 padding-left:0;
 padding-right:270px; /* Width of aside (width+padding+margin+border) */
}
.two-col.right > aside {
 margin-right:-100%;
}
.two-col.right > div {
 margin-right:10px;
 padding-right:10px;
}
.two-col.left {
 padding-left:260px; /* Width of aside (width+padding+margin+border) */
}
.two-col.left > aside {
 right:260px; /* Width of aside (width+padding+margin+border) */
 margin-left:-100%;
}
.two-col.left > div {
 margin-left:-10px; /* Left padding + left border */
 padding-left:10px;
}
.searchbar.two-col .two-col {
 padding-bottom:10000px;
 margin-bottom:-10000px;
}

.searchbar {
 height:75px; /* Simply remove this to have fluid height */
}
.searchbar .leftColumn { /* Left Column */

}
.searchbar .rightColumn { /* Right Column */

}
.searchbar .centerColumn { /* Center Column */

}

</style>

And the HTML:

<div class="two-col left searchbar">
 <div>
  <div class="two-col right">
   <div class="centerColumn">Center</div>
   <aside class="rightColumn">Right</aside>
  </div>
 </div>
 <aside class="leftColumn">Left</aside>
</div>