There are many ways to design 4 column layout. Different HTML code means different CSS design. Here's a list of HTML structures for 4 column layout.
Although a little more tags used, the layout is very robust esp. for liquid layout. Use 4 column layout generator to generate your CSS code.
<div class="colmask">
<div class="header">
head
</div>
<div class="colmid">
<div class="colin">
<div class="colleft">
<div class="col1">
column 1
</div>
<div class="col2">
column 2
</div>
<div class="col3">
column 3
</div>
<div class="col4">
column 4
</div>
</div>
</div>
</div>
<div class="footer">
footer
</div>
</div>This layout uses relative position so that left position could be adjusted to make the layout. Use this 4 column layout generator, it's easy to generater the CSS code for the layout.
<div class="header">
header
</div>
<div class="wrapper">
<div class="left1">
left1
</div>
<div class="left2">
left2
</div>
<div class="left3">
left3
</div>
<div class="right">
right
</div>
</div>
<div class="footer">
footer
</div>
This is probally the most likely people can think out. No need to set position attribute, the columns are seperated by margins. Use this 4 column CSS layout creator to generater the CSS code to change the width of each column of the web page.
<div class="wrapper"> <div class="header"> header </div> <div class="left1"> left1 </div> <div class="left2"> left2 </div> <div class="left3"> left3 </div> <div class="right"> right </div> <div class="footer"> footer </div> </div>