HTML Codes for 2 Column Layout

HTML Codes of 2 Column Layouts

There are many ways to design 2 column layout. Different HTML code means different CSS design. Here's a list of HTML structures for 2 column layout.

2 column layout - nested design

Although a little more tags used, the layout is very robust esp. for liquid layout. Use 2 column layout generator to generate your CSS code.

<div class="colmask">
    <div class="header">
	    head 
    </div>
    <div class="colleft">
        <div class="col1">
             right
        </div>
        <div class="col2">
             left
        </div>
    </div>
    <div class="footer">
	    footer
    </div>
</div>

2 column layout - parallel design

This layout uses relative position so that left position could be adjusted to make the layout. Use this 2 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="right">
        right
    </div>  	       
</div>
<div class="footer">
	footer
</div>

2 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 2 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="right">
	        right
	    </div> 
	    <div class="footer">
	        footer
	    </div>
    </div>

2 column fixed liquid layout

Use this tool to generater the CSS code for the 2 column layout - left column fixed and the right liquid.

    <div class="wrapper">
	    <div class="header">
	         header
	    </div> 	  
	    <div class="left">
	        left
	    </div>
	    <div class="right">
	        right
	    </div> 
	    <div class="footer">
	        footer
	    </div>
    </div>

2 column liquid fixed layout

Use this tool to generater the CSS code for the 2 column layout - left column liquid and the right fixed.

<div class="wrapper">
    <div class="header">
	         header
    </div> 
    <div class="wrapleft"> 	  
	    <div class="left">
	        left
	    </div>
	</div>    
	    <div class="right">
	        right
	    </div> 
	    <div class="footer">
	        footer
	    </div>     
</div>