CSS 3 column liquid layout with fixed center column

Question

I want to make for my marketing site a 3 column layout that has images in the top banner.

I want to have a liquid left/right side with a fixed center. The html would

Answer 1

Here's a good solution, in my opinion the easiest one. It looks clean and it doesn't need wrapper div.

Demo

HTML

    

        left content
    



    center content



    

        right content
    

CSS

#left_container {
  width:50%;
  float:left;
  margin-right:-480px; /* minus half of the center container width */

  /* not important */
  height: 200px;
}
#left {
  margin-right:480px; /* half of the center container width */

  /* not important */
  background: #888;
  height: 600px;
}
#center {
  width:960px; /* size of the fixed width */
  float:left;

  /* not important */
  color: #FFF;
  background: #333;
  height: 500px;
}
#right_container {
  width:50%;
  float:right;
  margin-left:-480px; /* minus half of the center container width */

  /* not important */
  height: 300px;
}
#right {
  margin-left:480px; /* half of the center container width */

  /* not important */
  height: 300px;
  background-color: #888;
}

enjoy!