Matching Columns for Fixed Web Page Layouts with CSS - Working with fixed web page layouts
(Page 2 of 4 )
Before I proceed to demonstrate how the CSS-based method that I showed you in the previous article of the series can be used to match the columns of a fixed web document, I would first like to build a simple layout for a sample web document, which displays completely unbalanced columns.
That being said, here are the respective definitions of the CSS styles and the structural markup that builds the sample web document in question:
<!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" />
<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;
}
#leftcol{
float: left;
width: 180px;
padding: 10px;
background: #eee;
}
#maincol{
float: left;
width: 375px;
padding: 10px;
}
#rightcol{
float: right;
width: 180px;
padding: 10px;
background: #eee;
}
#footer{
clear: both;
width: 780px;
padding: 10px;
margin-left: auto;
margin-right: auto;
background: #ffc;
}
</style>
<title>Example of unleveled columns - Fixed Design</title>
</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="leftcol">
<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>
</div>
<div id="rightcol">
<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>
If you take some time to test the previous code sample on your own browser, you'll see that it displays a simple three-column web page whose main bars look entirely unmatched. In this case, and in consonance with the concepts deployed in the introduction, this web document has been created by using a fixed layout, since all the widths of the main containers are specified in pixels.
Logically, the above example will be even more illustrative if you take a look at the following screen shot, which shows how the previous sample web page is displayed on the browser:
As you can see, what I built here was simply a three-column web document, where all of its main columns are completely unleveled. This certainly makes the document in question look rather unprofessional and poorly designed.
Nonetheless, I stated in the beginning of this tutorial that I was going to teach you how to use the same CSS-driven technique discussed in the previous article to fix this undesirable effect in a fixed layout.
In the next section I'm going to demonstrate how the web page layout listed a few lines before can be easily corrected so that it displays the corresponding containing columns neatly balanced.
To learn more about this interesting topic, please click on the link that appears below and keep reading.
Next: Balancing the columns of a fixed web page >>
More Style Sheets Articles
More By Alejandro Gervasio
