The Internet Connection

Adding a Footer to a Two-column Web Layout
In the last (April 2002) issue of this newsletter, this author provided instructions on how to create a two-column layout for your library's Web site using CSS rather than a table format. As the next step, in this month's column, we will add a footer to the Web page, again using only CSS.

Here's our code thus far:

CSS
       .left {float: left; width: 49%}
       .right {float: right; width: 49%}

XHTML (HTML) Tags
       <div class="left">
       content of the left column
       </div>
       <div class="right">
       content of the right column
       </div>

To add a footer, we must first create a new <div> with the content of the footer. This <div> is placed in the XHTML/HTML code after the right column.

       <div>
       <hr>
       © 2002, BCR<br />
       <a href="mailto:msauers@bcr.org"> msauers@bcr.org</a>
       </div>

(You can create a class to apply to this <div> to modify it as needed, such as changing the font size or alignment.)

This does the job, but there is one potential problem. What if the content of the left column is longer than the right column? In that case, we get the result shown below. See Figure 1.

Our <hr> (or footer line) is lost up near the top of the page (to the left of the right column content) and the footer text itself has become part of the right column. What we want is for the footer to appear beneath both columns.

To accomplish this, we need to add a line break that will instruct the following content (our footer <div>) to appear below both columns. This is done by adding the following XHTML/HTML code before our footer <div>:

This instructs the browser to issue a line-break, but not to display the next content until all margins can be reached. (We could have used clear="left" in this case but by using all, we don't need to keep track of which column is longer.) See Figure 2.

Next Article | Previous Article | Table of Contents | BCR Publications

Comments to: shoffhin@bcr.org
February 27, 2008
Copyright © 2002 BCR