STYLE SHEETS

Matching Columns for Fixed Web Page Layouts with CSS

If you're a web designer trying to learn how to build web page layouts where the main columns are displayed as completely balanced, then this group of articles might be what you need. Welcome to the second tutorial of the series that began with "Matching Web Page Columns with CSS." Over the course of this series, you'll learn a CSS-based approach which can be used to keep the length of your web page DIVs entirely level.

Author Info:

By: Alejandro Gervasio

Poor Best

Rating:

/ 6

July 23, 2007

TABLE OF CONTENTS:

<!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 >>