Tableless layouts have generated some heated debates around whether or not they are worth the effort. Many argue why suffer when tables do a good enough job? Well, I talked about standards and semantics in a previous article so I’ll leave that for you to read later. Putting semantic correctness aside, SEO plays a big part in why I made the switch a few years ago. I want to squeeze every last drop of advantage out of my markup as I can. It is not easy getting a top ranking so why make it harder but refusing to optimize your code?
Alright, enough of that, in reality tableless design really isn’t that hard once you have some practice and identify possible cross-browser issues that may arise like clearing floated divs and width differences.
So let’s lay down some structure. You can find the complete source for this article at the end. I am going to only focus on the pieces that apply to tableless design and assume you know the basics of layout a page.
Figure 1
<div id="content">
<div id="left">
<!-- use a container to avoid using padding and border on #left
which causes cross-browser inconsistencies with width -->
<div class="left-container">LEFT</div>
</div><!-- end #left -->
<div id="right">
<!-- use a container to avoid using padding and border on #right
which causes cross-browser inconsistencies with width -->
<div class="right-container">RIGHT</div>
</div><!-- end #right -->
<div class="clear"/>
</div><!-- end #content -->
This is the section we will have to float 2 divs side by side to create our 2 column layout. Before continuing I will explain some pieces of this code. I have used and extra container inside each column of this layout so that I can apply and padding or borders directly to the text and not to the column itself. The reason for this is Firefox, Opera, and other standards compliant browsers add margin and padding to the overall width of the div which will break our float because the 2 columsn width’s will equal greater than the width of the layout wrapper. Internet Explorer doesn’t add margins, etc to the overall width but subtracts them from it.
You’ll notice the div with class=”clear”, this will call the CSS class that will clear our floats. Again Internet Explorer 6 doesn’t require this because of it’s box model bug but other standards browers do need it. Using a break (br) tag is a common practice instead of a div tag but I discovered that Internet Explorer 7 seems to ignore a clearing break but works fine with a clearing div. I am not sure if it is only in select situations but I feel it is best to just avoid trouble altogether.
Now let’s look at our CSS
Figure 2
#wrapper
{
width: 790px;
margin: 0 auto;
}
#left
{
width: 590px;
background: #dedede;
float: left;
height: 500px;
}
.left-container
{
margin: 20px;
margin-bottom: 0; /* IE6 pushes footer down without this */
}
#right
{
width: 200px;
background: #b8b8b8;
float: left;
height: 500px;
}
.right-container
{
margin: 20px;
margin-bottom: 0; /* IE6 pushes footer down without this */
}
.clear
{
clear: left;
}
Notice the class clear, this clears the floats in our div, pretty simple. see how I add the margins to the left and right containers so we avoid any width problems. the width for #left and #right add up to the width of #wrapper (this contains the while layout) and #left and #right are floated left. I have set the background of each section to a different color so they will be easy to spot.
That’s pretty much it. That wasn’t too painful was it? Copy the source code below and make an HTML page and take a look at the finsihed product. A valid, hack free, 2 column, tableless layout. I didn’t even need a conditional comment.
Article Source
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Tableless layout</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<style type="text/css">
body
{
margin: 0;
font-family: Verdana, Arial, sans-serif;
}
#wrapper
{
width: 790px;
margin: 0 auto;
}
#header
{
padding: 25px;
background: #eeeeee;
}
#content
{
}
#left
{
width: 590px;
background: #dedede;
float: left;
height: 500px;
}
.left-container
{
margin: 20px;
margin-bottom: 0; /* IE6 pushes footer down without this */
}
#right
{
width: 200px;
background: #b8b8b8;
float: left;
height: 500px;
}
.right-container
{
margin: 20px;
margin-bottom: 0; /* IE6 pushes footer down without this */
}
#footer
{
padding: 10px;
background: #eeeeee;
}
.clear
{
clear: left;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
HEADER
</div><!-- end #header -->
<div id="content">
<div id="left">
<!-- use a container to avoid using padding and border on #left
which causes cross-browser inconsistencies with width -->
<div class="left-container">LEFT</div>
</div><!-- end #left -->
<div id="right">
<!-- use a container to avoid using padding and border on #right
which causes cross-browser inconsistencies with width -->
<div class="right-container">RIGHT</div>
</div><!-- end #right -->
<div class="clear"/>
</div><!-- end #content -->
<div id="footer">
FOOTER
</div><!-- end #footer -->
</div><!-- end #wrapper -->
</body>
</html>
Did You Enjoy This Post?
Be sure to grab my RSS feed so you don't miss out on more great articles.
This Post Was Brought To You By
How do I save time? I use FreshBooks for invoicing.
Get Information Technology magazine subscriptions and white papers for FREE!
Did you like this post? Be sure to CSS - Hack Free 2 Column Tableless Layout
August 6th, 2007 at 4:22 am
Yeah, but what about equal length columns!
August 6th, 2007 at 4:28 am
The easiest way to deal with this, because it is true that it is very painful to get the columns to be the same height, is to use a repeating background image to simulate equal height columns.
August 6th, 2007 at 5:30 am
You can also achieve this same layout with slightly less code and without the clearing div.
Remove the left float on the left style and change the right style to float right. Then in the body place the right div before the left div.
This will cause the right div to float right and the left div will settle to its left.
Remove the clearing div as it is no longer needed.
For some reason with this layout the margin on the left -container is being inherited by the left div and there is a space between the header and the columns. To address this remove the margins on the containers and replace with padding. This fixes the problem without cross-browser issues with column width.
I would also suggest removing the width on the left style. This way you can increase the size of the wrapper and the left div will stretch to fill.
August 29th, 2007 at 10:09 pm
Programming Tutorials…
I couldn’t understand some parts of this article, but it sounds interesting…
August 30th, 2007 at 3:20 am
A big thanks to Matt’s above comment!! Helped me a lot with a layout issue that I was having!
October 5th, 2007 at 1:36 am
For equal columns:
#some-column {
padding-bottom: 10000px;
margin-bottom: -10000px;
overflow: hidden;
}
July 13th, 2008 at 5:48 pm
Dear Dejan,
I can’t believe it! This EASY addition to my CSS did the trick! I am in ecstasy! I’ve been looking and looking for a solution to this problem. THANK YOU so much!!!! I am absolutely amazed after reading all these major detailed, lengthy fixes.
Great thread … it enabled me to put this equal column problem to bed. I’m so glad I didn’t give up and scanned all the way to the bottom! I am so grateful!!!!
Thanks all,
Layne
July 13th, 2008 at 6:46 pm
Ooops! I spoke too soon. It worked in Dreamweaver CS3, but out on the web on both IE 7 and Firefox it didn’t work.
Darn! Thanks anyway though. Maybe I’m on the right track at least.
September 16th, 2008 at 2:16 am
thanks for free source code.
September 16th, 2008 at 2:47 am
please send daily free css soure code.