Creating DIV-based CSS Tables - A three-column web page layout using a floating-div approach
(Page 2 of 4 )
I know that you want to learn how to build CSS tables with divs quickly, but please take a look at this introductory example first. It demonstrates basically how to construct a typical three-column web page layout by using some floating divs.
Here’s the corresponding 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 three-column web page layout</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;
}
#header{
width: 780px;
padding: 10px;
margin-left: auto;
margin-right: auto;
background: #ffc;
}
#navbar{
width: 780px;
padding: 10px;
margin-left: auto;
margin-right: auto;
background: #fc0;
}
#navbar ul{
list-style: none;
}
#navbar li{
display: inline;
padding-right: 4%;
}
#navbar a:link,#navbar a:visited{
font: normal 12px Arial, Helvetica, sans-serif;
color: #039;
text-decoration: none;
}
#navbar a:hover{
text-decoration: underline;
}
#mainwrapper{
width: 800px;
margin-left: auto;
margin-right: auto;
}
#col1{
float: left;
width: 180px;
padding: 10px;
background: #eee;
}
#col2{
float: left;
width: 375px;
padding: 10px;
}
#col3{
float: right;
width: 180px;
padding: 10px;
background: #eee;
}
#footer{
clear: both;
width: 780px;
padding: 10px;
margin-left: auto;
margin-right: auto;
background: #ffc;
}
</style>
</head>
<body>
<div id="header">
<h2>This is the header section of the web page</h2>
<p>Contents for header section go here. Contents for header section go here. Contents for header section go here. Contents for header section go here.</p>
</div>
<div id="navbar">
<h2>This is the navigation bar of the web page</h2>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
<li><a href="#">Link 6</a></li>
</ul>
</div>
<div id="mainwrapper">
<div id="col1">
<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="col2">
<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>
</div>
<div id="col3">
<h2>This is the right column of the web page</h2>
<p>Contents for right column go here. Contents for right column go here. Contents for right column go here. Contents for right column go here. Contents for right column go here.</p>
</div>
</div>
<div id="footer">
<h2>This is the footer section of the web page</h2>
<p>Contents for footer section go here. Contents for footer section go here. Contents for footer section go here. Contents for footer section go here. Contents for footer section go here.</p>
</div>
</body>
</html>
Despite the simplicity of the above hands-on example, it's pretty useful for illustrating how to build a common three-column web page layout by means of some divs that have been floated to the left and right sides of the pertinent web document with the “float” CSS property.
In addition to listing the CSS styles and markup corresponding to the prior web page design, below I included an extra screen shot, which shows the visual appearance of this basic layout. Take a look at it, please:
It’s quite possible that you find this approach easy to implement, when it comes to creating both liquid and fixed designs. For inexperienced designers, however, this method can be pretty intimidating, since it requires a very solid background in CSS.
However, as I mentioned right at the beginning, many standards-compliant browsers support the utilization of CSS tables, which makes it even easier to build web page layouts like the one shown previously, since no floating divs need to be used.
Therefore, in the following section, I’m going to walk you through using CSS tables to build a basic two-column web page layout. This will help you learn quickly the basic concepts that surround the utilization of this technique.
Please click on the below link and keep reading.
Next: Using CSS tables to create a two-column web document layout >>
More Style Sheets Articles
More By Alejandro Gervasio
/ 6 
