HTML Codes of Page Layout

The HTML code for the page layout is static. You only need one time copy and insert them into tags <body></body>. The rest is adjusting the sliders in the layout generator to get your opitimized CSS codes for the class - colmask, colleft, col1, col2, etc.

1 columns for websites

Copy and insert the code into tags <body></body>. You could add any content, HTML tags into layers of header, footer, and main body. Using the 1 column layout generator, it's easy to change the ratio of left and right section of the page.

<div class="bottom">
    <div class="header">
        head <br />
    </div>
    <div class="colmask">	
        main body
    </div>
    <div class="footer">
        footer <br>
    </div>
</div>

2 columns for websites

Copy and insert the code into tags <body></body>. You could add any content, HTML tags into layers of header, footer, left body and right body. But never insert them between layers of colmask, colleft. Using the 2 column layout generator, it's easy to change the ratio of left and right section of the page.

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

3 columns for websites

Copy and insert the code into tags <body></body>. Then you could add any content, HTML tags into layers of header, footer, middle, left and right body. But never insert them between layers of colmask, colmid, colleft. Using the 3 column layout generator, it's easy to generater the CSS code to change the ratio of left, middle and right section of the page.

<div class="bottom">
    <div class="header">
	    head <br />
    </div>
    <div class="colmask">
        <div class="colmid">
            <div class="colleft">
                <div class="col1">
                      middle
                </div>
                <div class="col2">
                      left
                </div>
                <div class="col3">
                      right
                </div>
            </div>
        </div>
    </div>
    <div class="footer">
	    footer <br>
    </div>
</div>

4 columns for websites

Copy and insert the code into tags <body></body>. Then you could add any content, HTML tags into layers of header, footer, and column 1, 2, 3, 4. But never insert them between layers of colmask, colmid, colin, colleft. Use the 4 column layout generator to generater the CSS code to change the width of each column of the web page.

<div class="bottom">
    <div class="header">
	    head <br />
    </div>
    <div class="colmask">
        <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>
    <div class="footer">
	    footer <br>
    </div>
</div>

5 columns for websites

Copy and insert the code into tags <body></body>. Then you could add any content, HTML tags into layers of header, footer, and column 1, 2, 3, 4, 5. But never insert them between layers of colmask, colmid, colin, colwu, colleft. Use the 5 column layout generator to generater the CSS code to change the width of each column of the web page.

<div class="bottom">
    <div class="header">
	    head <br />
    </div>
    <div class="colmask">
        <div class="colmid">
        <div class="colin">
        <div class="colwu">
            <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 class="col5">
                      column 5
                </div>             
            </div>
        </div>
        </div>
        </div>
    </div>
    <div class="footer">
	    footer <br>
    </div>
</div>