HTML Codes of 3 Column Layouts

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.

3 column layout - nested design

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>

3 column layout - parallel design

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>

3 column CSS layout creator - margin style

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>

3 column fixed liquid fixed layout

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>

3 column liquid fixed fixed layout

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>