Multi Column DIV Structure
It is very easy to make columns in tables with tr td etc. But as today web sites are more dependent on CSS. And to reduce the load, divs are being popular and standardized for web design.
Now we can all write "div"s in vertical manner. But how to make a div based structure where divs will act as columns rather than Rows?
In this tutorial, we will see how to make such divs.
We will make a three column structure. So first declare three divs -
<div id="page-container">
<div id="left-column"></div>
<div id="right-column"></div>
<div id="center-column"></div>
</div>
<div id="left-column"></div>
<div id="right-column"></div>
<div id="center-column"></div>
</div>
Now include the following classes in the css.
#page-container{
width:100%;
}
#left-column{
float: left;
width:33%;
}
#right-column{
float: right;
width:33%;
}
#center-column{
float: right;
width:34%;
}
width:100%;
}
#left-column{
float: left;
width:33%;
}
#right-column{
float: right;
width:33%;
}
#center-column{
float: right;
width:34%;
}
Note: The the order of the column divs are left,right and center. So the browser will first make the left column left aligned, the right column right aligned and then the center column right aligned to the right column.
To make a space between the column, we can set a padding in the page-container class.
To make a space between the column, we can set a padding in the page-container class.
Posted by admin in DIV on Saturday, August 22, 2009
# by Anonymous - August 24, 2009 at 1:03 PM
Thank You. It was very helpful
# by Anonymous - August 24, 2009 at 2:24 PM
Thanks a lot...... Was searching for this for long.
# by Robert - August 27, 2009 at 1:14 PM
cool! but need some customization... gr8 work.