Holy Grail Layout

DOCTYPE

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">

Markup

<div id="header">Header</div>
<div id="container">
	<div id="center" class="column">Center</div>
	<div id="left" class="column">Left</div>
	<div id="right" class="column">Right Column</div>
</div>
<div id="footer-wrapper">
	<div id="footer">Footer</div>
</div>

CSS

body {
  min-width: 630px; /* 2x(LC fullwidth + CC padding) + RC fullwidth */
  background:#FFFFFF;
  margin:0;padding:0;
}
#header {
  background:CornflowerBlue;
  height:40px;
}
#container {
  padding-left: 200px;   /* LC width */
  padding-right: 190px;  /* RC fullwidth + CC padding */
  background:#CCFFDD;
  overflow: hidden;
}
#container .column {
  position: relative;
  float: left;
  padding-bottom: 20010px;  /* X + padding-bottom */
  margin-bottom: -20000px;  /* X */
  overflow:hidden;
  min-height:500px;
}
#center {
  width: 100%;
  background:#FFFFFF;
  padding: 10px 20px;    /* CC padding */
}
#left {
  width: 180px;          /* LC width */
  margin-left: -100%;
  background:greenyellow;
  padding: 0 10px;
  right: 240px;  /* LC fullwidth + CC padding */
}
#right {
  background:limegreen;
  width: 130px;          /* RC width */
  padding: 0 10px;       /* RC padding */
  margin-right: -190px;  /* RC fullwidth + CC padding */
}
#footer {
  clear: both;
  background:#FF6A6A;
  position: relative;
  height:30px;
}
/*** IE6 Fix ***/
* html #left {
  left: 150px;           /* RC width */
}
* html body {
  overflow: hidden;
}
* html #footer-wrapper {
  float: left;
  position: relative;
  width: 100%;
  padding-bottom: 10010px;
  margin-bottom: -10000px;
  background: #FFFFFF;         /* Same as body background */
}