3 Column Layout Generator

The following script is based on CSS developed by Matthew James Taylor and his 3 column Liquid Layout named Holy Grail.  I had a requirement to alter the column widths so wrote a script to make the calculations for me.  Maybe other people will find it useful too!

Simply select the options below and copy/paste the code into your page and stylesheet.

Left:
Right:
Left Pad:
Mid Pad:
Right Pad:

CENTER CONTENT
LEFT CONTENT
RIGHT CONTENT

HTML

<div class="holygrail colmask">
 <div class="colmid">
  <div class="colleft">
   <div class="col1wrap">
    <div class="col1">CENTER CONTENT</div>
   </div>
   <div class="col2">LEFT CONTENT</div>
   <div class="col3">RIGHT CONTENT</div>
  </div>
 </div>
</div>

CSS

.colmask {
 position:relative; /* This fixes the IE7 overflow hidden bug and stops the layout jumping out of place */
 clear:both;
 float:left;
 width:100%; /* width of whole page */
 overflow:hidden; /* This chops off any overhanging divs */
}
/* holy grail 3 column settings */
.holygrail {
 /*background:#ff9;*/ /* Right column background colour */
}
.holygrail .colmid {
 float:left;
 width:200%;
 position:relative;
 right:100%;
 /*background:#fff;*/ /* Centre column background colour */
}
.holygrail .colleft {
 float:left;
 width:100%;
 margin-left:-50%;
 position:relative;
 /*background:#FFD8B7;*/ /* Left column background colour */
}
.holygrail .col1wrap {
 float:left;
 width:50%;
 position:relative;
 padding-bottom:1em; /* Centre column bottom padding. Leave it out if it's zero */
}
.holygrail .col1 {
 position:relative;
 left:200%;
 overflow:hidden;
}
.holygrail .col2 {
 float:left;
 float:right; /* This overrides the float:left above */
 position:relative;
}
.holygrail .col3 {
 float:left;
 float:right; /* This overrides the float:left above */
 position:relative;
 left:50%;
}