Building a Three-Column Web Page Layout with DIV-Based CSS Tables - Review: a two-column liquid design with CSS tables
(Page 2 of 4 )
In case you haven’t had the chance to read the first tutorial of the series, where I explained how to build a two-column web page layout using CSS tables, now you have a good opportunity for studying the complete source code that corresponds to this particular example.
In this case, the layout is composed of two main divs, identified as “sidebar” and “maincol” respectively. Thanks to the functionality of the “display” CSS property, these are rendered as cells of an HTML table.
Now that I have clarified that concept, please take a look at the following code sample:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Example of div-based web page layout using CSS tables (2 columns)</title>
<style type="text/css">
body{
padding: 0;
margin: 0;
background: #fff;
}
h2{
margin: 0;
font: bold 18px Arial, Helvetica, sans-serif;
color: #000;
}
p{
font: normal 12px Arial, Helvetica, sans-serif;
color: #000;
}
#maincol, #sidebar{
display: table-cell;
}
#tablewrapper{
border-collapse: collapse;
display: table;
table-layout: fixed;
}
#sidebar{
width: 20%;
padding: 10px;
background: #eee;
}
#maincol{
width: 80%;
padding: 10px;
}
</style>
</head>
<body>
<div id="tablewrapper">
<div id="sidebar">
<h2>This is the left column of the web page</h2>
<p>Contents for left column go here. Contents for left column go here. Contents for left column go here. Contents for left column go here. Contents for left column go here. Contents for left column go here. Contents for left column go here. Contents for left column go here. Contents for left column go here. Contents for left column go here.</p>
</div>
<div id="maincol">
<h2>This is the center column of the web page</h2>
<p>Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here.</p>
<p>Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here.</p>
<p>Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here. Contents for center column go here.</p>
</div>
</div>
</body>
</html>
As you can see, the above example demonstrates how to construct a basic two-column web page layout by using CSS tables. In this case, the “float” CSS property is used to specify that the respective sidebar and the main column that comprise the web document must be displayed as regular table cells.
In addition, the divs are wrapped by a generic one, called “tablewrapper,” which is also rendered as a typical HTML table. Pretty simple to grasp and code, right?
Now that you have a clearer idea of how to build a basic web page layout with CSS tables, I’m sure that you’ll agree with me that this approach is much more intuitive than using floating divs or negative margins.
Of course, it’s fair to say that if you test the above example with Internet Explorer 7 and below, you’ll feel disappointed (yes, I’ve heard that before), since the layout will be broken. Instead, when using Firefox, you’ll get an output similar to the one depicted by the image below:
So far, so good. At this moment, you have hopefully recalled the full details on using CSS tables to build a primitive two-column web page layout. Therefore, the next thing I’m going to teach you will be how to use the tables for constructing a layout comprised of three main containers.
To learn how this brand new example will be developed, please visit the following section. It’s only one click away.
Next: Building a three-column web page layout with CSS tables >>
More Style Sheets Articles
More By Alejandro Gervasio
/ 2 
