Once upon a time we used to make HTML page layouts using normal tables. But that makes our codes very messy. Tables are to represent tabular data and it
always should. We should not use tables for Layouts as it is also not in web standards. DIV means division, and DIV tags are to differentiate various kind of things in a page. So the solution is to use DIV tags and float property from CSS.
In layout.html file, we create a div with ID container. This container DIV holds another four DIVs with IDs respectively header, left, right and footer. We set margin to “0 auto” to centerize the main container div. Then we set same width of header and footer DIV. Height doe’s not matter. After that we set width of left DIV to 80% and right one to 20% so both fill the container div completely. But this do not help to sort left DIV and right DIV one after another horizontally. To do that we need to use CSS float property to those Divs.
Set float property of left and right DIVs to left or right, and boom! It will make them floating to left or right. We used left here. A common problem with float based layouts is that the floats’ container doesn’t want to
stretch up to accommodate the floats. Adding a BR tag after the floated DIVs with clear property with value of “both” will fix this issue. Try the codes below.
<title>Table Less DIV Based Layout using Float - w3epic.com</title>
<link type="text/css" rel="stylesheet" href="layout.css" />
<div id="left">Left DIV</div><div id="right">Right DIV</div>
<br class="clear" />
margin: 0 auto;
If you want to balance left and right DIVs dynamically, please check this thread : Balancing Columns – Making Two DIVs Equal Height using jQuery.
You can download all correspondence files from here
Having problem? Just comment below, Thanks.