STYLE SHEETS

Matching Web Page Columns with CSS

For a long time, conscientious web designers have known that building web page layouts where the heights of the main columns are neatly matched is required to achieve a truly professional look and feel for a web site. This three-part article series will show you a good approach for creating this result.

Author Info:

By: Alejandro Gervasio

Poor Best

Rating:

/ 5

July 18, 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{
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;
}

#mainwrapper{
   clear: both;
   height: 100%;
   overflow: hidden;
   background: #eee;
}

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

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

#leftbar{
width: 16%;
padding: 2%;
}

#centerbar{
   float: left;
   width: 55%;
   padding: 2%;
   background: #fff;
}

#rightbar{
width: 16%;
padding: 2%;
}

#footer{
   clear: both;
   padding: 2%;
   background: #ffc;
}
</style>
<title>Example of evened columns - Liquid 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>
      <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>

Wasn't that easy to achieve? I bet it was! As you can see the above (X)HTML file displays a liquid web page whose main columns look completely balanced. Besides, in case the previous code sample isn't enough for you, this neat effect can be seen with more accuracy in the following screen shot:

As demonstrated by the above image, now the sample web document displays its respective columns fully balanced on the browser. Logically, this effect has been achieved by assigning one background color to the wrapping DIV defined previously, and a different one to the centered column, but this technique can be quite useful when working with either liquid or fixed layouts.

As with many other topics related to web development, the best way for you to learn the previous approach is by creating your own test examples.

Final thoughts

In this first part of the series, you learned how to implement a basic CSS-based solution, aimed at keeping the respective columns of a given web document entirely leveled. Nevertheless, this method has been used along with a liquid web page layout, thus in the next part I'm going to teach you how to utilize it with a fixed design.

Want to see how this will be done? Don't miss the next article!

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.