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:
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%;
}