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{
   clear: both;
   width: 800px;
   height: 100%;
   margin-left: auto;
   margin-right: auto;
   overflow: hidden;
   background: #eee;
}

#mainwrapper .leftcol{
position: relative;
float: left;
}

#mainwrapper .rightcol{
position: relative;
float: right;
}

#leftbar{
width: 180px;
padding: 10px;
}

#centerbar{
   float: left;
   width: 380px;
   padding: 10px;
   background: #fff;
}

#rightbar{
width: 180px;
padding: 10px;
}

#footer{
   clear: both;
   width: 780px;
   padding: 10px;
   margin-left: auto;
   margin-right: auto;
   background: #ffc;
}
</style>
<title>Example of evened 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="leftbar" class="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="centerbar" class="leftcol">
      <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="rightbar" class="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>

As shown above, the sample web page now displays its main bars neatly balanced. Of course, the tricky part of this technique is based upon assigning one background color to the previous "mainwrapper" DIV, and a different color to the centered column, in this way achieving the desired visual effect with the columns in question.

The prior code sample can be easily complemented with an illustration of the so-called evened columns, as shown below:

And naturally, the major advantage in implementing this CSS-based approach rests on its flexibility; it can be used with both liquid and fixed web page layouts. As you can see from the previous example, there's no need to be a guru of web design to build a consistent web page layout.

Final thoughts

In this second article of the series, you hopefully learned how to implement a fully CSS-based solution to keep the main columns of a given web page completely balanced, in this case using a fixed layout.

This educational journey isn't finished yet. In the last part of the series I'm going to teach you how to build completely even web page columns that also include some appealing background images.

Now that you've been warned, 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.