How to Create Columns with Div’s?

They always say DIV's are better than tables, but at times we just get stuck. Why is it so complicated to do this and people still say DIV's are better.

Here's my bit to help:

How do we create columns using DIV's?

The <div> tag can be defined as the division in a web page. It is a block level element. This implies that the default behavior of div’s is to stack up one above the other. This serves the purpose of using div’s for a simple web page layout where all the elements stack one above the other. When we have a columnar web page layout (which happens to be the most common layout for majority of the websites), we need to know how to use div’s to create two or more columns in a web page.

The following method will cause div’s to stack up side by side rather than one above the other.

Let’s say that we have two div’s:

<div id="div1"></div>
<div id="div2"></div>

Now, in the stylesheet declare the following rules.

#div1 { float:left; width:50%;}
#div2 { float:left; width:50%;}

This just created two columns for you. If you need three:

<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
#div1 { float:left; width:33%;}
#div2 { float:left; width:33%;}
#div3 { float:left; width:33%;}

Ofcourse you can adjust the width percentage or specify in pixels to suit your need. But remember, if your total width in percentage or pixels exceeds that of 100% or max pixel width, the last div will jump to the next line.

When you have multiple rows of such columns, remember to make sure the heights of such divs are equal in each row. This height must include the padding and margins.

Hope it helped!

Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License