There are many ways to design multicolumn layouts. HTML structure decides the CSS code. Here's a collection of HTML codes for 1, 2, 3, 5 column layouts.
It's simple. Just one div box. Here I add 2 divs for a header and footer. Use 1 column layout generator to get the CSS code.
<div class="header">
head
</div>
<div class="colmask">
main body
</div>
<div class="footer">
footer
</div>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="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>
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="colmask">
<div class="header">
head
</div>
<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 class="footer">
footer
</div>
</div>