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

There are several solutions to this, probably the post popular of which is the Holy Grail method. It's a little above my head, but these links explain it pretty well.

http://alistapart.com/article/holygrail

http://matthewjamestaylor.com/blog/perfect-3-column.htm

I would start with A List Apart's article. Good luck.

After re-reading it, I think this is what I would do:

HTML

CSS

body {
    min-width: 550px;      /* 2x LC width + RC width */
}
#container {
    padding-left: 200px;   /* LC width */
    padding-right: 150px;  /* RC width */
}
#container .column {
    position: relative;
    float: left;
}
#center {
    width: 100%;
}
#left {
    width: 200px;          /* LC width */
    right: 200px;          /* LC width */
    margin-left: -100%;
}
#right {
    width: 150px;          /* RC width */
    margin-right: -150px;  /* RC width */
}
#footer {
    clear: both;
}
/*** IE6 Fix ***/
* html #left {
  left: 150px;           /* RC width */
}

You'll need to adjust some of the dimensions, but the inline comments should help with that. So there you have it. The Holy Grail Layout.