Creating Table like columns using DIVs
During past few months I observed that see so many developers face problems with div based layout. One of the major poblem they face in creating columns using div. We are very used to tables and we know its preety simple to create different columns through tables, just like
-
<table> <tr><td> Column 1</td><td>Column 2</td><td> Column 3 </td></tr></table>
Now what if you want to create similar structure using divs. Is it really difficult? Certainly not. Just create a main div and now place 3 divs inside it. Important is giving width to each div and mentioning “flot:left” for the inner divs.
-
<style>
-
#main { width:400px; height:300px; }
-
.left { width: 100px; height: 300px; float:left; }
-
.center { width: 200px; height: 300px; float:left; }
-
.right { width: 100px; height: 300px; float:left; }
-
</style> <div id="main"> <div class="left">Column 1</div> <div class="center">Column 2</div> <div class="right">Column 3</div> </div>
If you want all divs of same size like equal width columns then no need to even create different style for each column. Code shown below will also work for you.
-
<style>
-
#main { width:400px; height:300px; }
-
.sub { width: 100px; height: 300px; float:left; }
-
</style>
-
-
<div id="main"> <div class="sub">Column 1</div> <div class="sub">Column 2</div> <div class="sub">Column 3</div> </div>
