There are many ways to design 3 column layout. Different HTML code means different CSS design. Here's a list of HTML structures for 3 column layout.
Although a little more tags used, the layout is very robust esp. for liquid layout. Use 3 column layout generator to generate your CSS code.
<div class="colmask">
<div class="header">
head
</div>
<div class="colmid">
<div class="colleft">
<div class="col1">
Middle
</div>
<div class="col2">
left
</div>
<div class="col3">
Right
</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 3 column layout generator, it's easy to generater the CSS code and change the ratio of left, middle and right section of the page.
<div class="header">
header
</div>
<div class="wrapper">
<div class="left">
left
</div>
<div class="middle">
middle
</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 3 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="left">
left
</div>
<div class="middle">
middle
</div>
<div class="right">
right
</div>
<div class="footer">
footer
</div>
</div>
Use this tool to generater the CSS code for the 3 column layout - left column fixed, middle liquid and the right fixed.
<div class="wrapper">
<div class="header">
header
</div>
<div class="wrapmiddle">
<div class="middle">
middle
</div>
</div>
<div class="left">
left
</div>
<div class="right">
right
</div>
<div class="footer">
footer
</div>
</div>
Use this tool to generater the CSS code for the 3 column layout - left column liquid, middle and right fixed.
<div class="wrapper">
<div class="header">
header
</div>
<div class="wrapleft">
<div class="left">
left
</div>
</div>
<div class="middle">
middle
</div>
<div class="right">
right
</div>
<div class="footer">
footer
</div>
</div>