Layouts without Table using DIV tags by CSS Float Property

arp14 CSS, HTML, Tutorial Tags: , , , , , 5

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.

Correspondence Files:
  • layout.html
  • layout.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.

layout.html
<html>
<head>
	<title>Table Less DIV Based Layout using Float - w3epic.com</title>
	<link type="text/css" rel="stylesheet" href="layout.css" />
</head>
<body>
	<div id="container">
		<div id="header">Header</div>
		<div id="left">Left DIV</div><div id="right">Right DIV</div>
		<br class="clear" />
		<div id="footer">Footer</div>
	</div>
</body>
</html>
layout.css
body { 
	margin: 0; 
	padding: 0; 
}

#container {
	width: 800px;
	background: #eee;
	margin: 0 auto;
}

#header {
	width: 100%;
	height: 50px;
	background: #f00;
}

#left {
	width: 80%;
	height: 400px;
	background: #ccc;
	float: left;
}

#right {
	width: 20%;
	height: 400px;
	background: #ff0;
	float: left;
}
#footer{
	width: 100%;
	height: 50px;
	background: #0f0;
}

.clear {
	clear: both;
}

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.

5 thoughts on “Layouts without Table using DIV tags by CSS Float Property

  1. Is it just me, or does the spacing look off? In all frenaiss, this isn’t IE specific, but many browsers apply a default amount of margin, padding, line-height, etc to their elements. The best way to fight this is with a good ol’ global reset style sheet. Not only does it help with keeping the spacing consistent, but it saves a good amount of time in coding your css. Here’s ours.

    1. Yes, you’re right. But this is just basics of using divs and css float property for layouts. I’ll post about resetting browsers default CSS ASAP.
      Thanks for remembering me. Keep visit 🙂

Leave a Reply

Note: Your email address will not be published. Required fields are marked *