Building a Three-Column Web Page Layout with DIV-Based CSS Tables - Finishing the three-column web page layout
(Page 4 of 4 )
Definitely, the best way to grasp how the previous three-column web page layout has been constructed by means of CSS tables is to include the corresponding CSS styles and the markup pertaining to it into one single file.
With that idea in mind, below I defined a basic (X)HTML file, which is tasked with displaying the aforementioned web document layout. Here it is:
<!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 (3 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;
}
#navbar, #maincol, #sidebar{
display: table-cell;
}
#tablewrapper{
border-collapse: collapse;
display: table;
table-layout: fixed;
}
#navbar{
width: 500px;
padding: 10px;
background: #eee;
}
#maincol{
width: 50%;
padding: 10px;
}
#sidebar{
width: 30%;
padding: 10px;
background: #eee;
}
</style>
</head>
<body>
<div id="tablewrapper">
<div id="navbar">
<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 id="sidebar">
<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>
<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>
<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>
</body>
</html>
As you can see, the definition of the above (X)HTML file is rather trivial, so you shouldn’t have major difficulties understanding how it works. In addition to the pertinent source code corresponding to this three-column web page layout, I included a screen shot that shows how this sample web document is displayed by Mozilla Firefox:
Lastly, please keep in mind that none of this will work with Internet Explorer 7 and below, so if you want to try out this example with IE 8, you should use its beta version.
Final thoughts
In this second episode of the series, I walked you through constructing a basic three-column web document layout with the assistance of CSS tables. As you saw for yourself, this particular process doesn’t differ too much from working with two columns, which speaks for itself about the versatility offered by this CSS approach.
In the next part, I’ll be incorporating a few additional styles to the previous web page layout, with the purpose of improving its visual appearance.
So, now that you’re aware of the topics that will be covered in the upcoming tutorial, you won’t want to miss it!
| DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware. |
/ 2 
