Matching Web Page Columns with CSS - Building a DIV-based web page layout with unleveled columns
(Page 2 of 4 )
In accordance with the concepts deployed in the beginning of this article, before I proceed to show you how to keep the main columns of a given web document completely matched, first I'd like to develop an introductory example aimed at illustrating clearly the nature of the aforementioned issue.
As you'll see in a few moments, the hands-on example that I plan to include here will be based upon building a basic web page comprised of the header, main, and footer sections, which will display its respective vertical columns completely unleveled.
Having said that, now have a look at the following screen shot that precisely demonstrates this undesirable condition:
As depicted by the above image, I built a sample web document which displays on the browser its main columns entirely unmatched. It's a pretty ugly effect, right? However, as you'll certainly know, this scenario is quite frequent when designing the front-end of a web site, at least in its first development stages.
All right, now that you have a more accurate idea about the problems that might arise surrounding the display of unleveled columns included into a given web page, let me show you the corresponding CSS styles and structural markup that builds the web document depicted previously.
The signature of this sample (X)HTML file looks like this:
<!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{
padding: 2%;
background: #ffc;
}
#navbar{
padding: 1% 2% 1% 2%;
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;
}
#leftcol{
clear: both;
float: left;
width: 16%;
padding: 2%;
background: #eee;
}
#maincol{
float: left;
width: 55%;
padding: 2%;
}
#rightcol{
float: right;
width: 16%;
padding: 2%;
background: #eee;
}
#footer{
clear: both;
padding: 2%;
background: #ffc;
}
</style>
<title>Example of unleveled columns</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="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 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>
As you can see, the prior (X)HTML file uses a few simple CSS styles and a basic structural markup to display a primitive web page, achieving the extremely popular three-column layout. In addition, you should notice that the layout in question is based on a liquid design, and that all the corresponding columns have been positioned in the web document by using the "float" CSS property. Pretty simple, right?
Of course, as you'll possibly know, there are many ways to build a three-column web page layout like the one shown, but in this case I opted to use floating DIVs to illustrate the problem. And certainly, speaking of problems, you can see that the prior sample web page displays its main columns entirely unmatched, definitely an undesirable effect that makes it look pretty unprofessional.
So far, so good, right? At this point, I provided you with a concrete example concerning the creation of a three-column web page layout, which obviously presents a serious problem, since the respective columns are shown completely unleveled.
However, as you may have guessed, the aforementioned issue can be easily corrected by using only some basic CSS styles for matching the respective heights of the columns.
Want to see how the previous sample web page will be modified to match its columns? Click on the link below and keep reading.
Next: Matching the heights of web page columns >>
More Style Sheets Articles
More By Alejandro Gervasio
