From Jennifer Kyrnin,
Your Guide to Web Design / HTML.
FREE Newsletter. Sign Up Now!

The first thing you should be aware is that this site is not built using these techniques. The Web Design site on About (and all About sites) is built using tables, and until browsers that support CSS Positioning are more widely used, will be for the foreseeable future.

Browser Support

CSS Positioning (CSS-P) is the only way to create standards based Web pages using XHTML. Why? Because XHTML requires that tables only be used to define tabular data, and not be used for layout. The problem is, until recently, most browsers only had sketchy support of CSS-P. But now, the following browsers and versions, have minimal to good support of CSS-P, among others:

• Microsoft Internet Explorer 6
• Microsoft Internet Explorer 5
• Netscape Navigator 7
• Netscape Navigator 6
• Opera 6
• Opera 5
• Mozilla 1
• Konqueror 3
• Konqueror 2

Rethinking How You Build a Page

When you build a site using tables, you have to think in a "tabular" format. In other words, you're thinking in terms of cells and rows and columns. And your Web pages will reflect that. When you move to a CSS-P design, you'll start thinking of your pages in terms of the content.

For example, the page for this article can be considered to have five content parts:

1. the header
   This is where my photo is, the top banner ad, and basic navigation.
2. the left navigation
   This is the left side of the page, with the subjects and essentials.
3. the right navigation
   This is where the tower ads and other information is.
4. the content
   The text of this article.
5. the footer
   The bottom navigation, copyright information, lower banner ad, and so on.

Rather than putting those elements in a table, I can use the <div></div> tag to define the different portions of the content, and then use CSS-P to place the content elements on the page.

For the sake of this article, I'm going to pretend there are just three columns on the page, and ignore the header and footer.

Identifying Your Sections

Once you've defined the different content areas of your site, you need to write them in your HTML. While you can, generally, place your sections in any order, it's a good idea to place first items you'd like less advanced browsers to see first.

For my three column layout, I'm going to have three sections:

1. leftnavigation
2. rightnavigation
3. content

These will be defined using div tags with the id attribute. Remember, when you use the id attribute, you need to have a unique name for each id.

1. <div id="leftnavigation"></div>
2. <div id="rightnavigation"></div>
3. <div id="content"></div>

Positioning

This is the fun part. Using CSS you can define the position for your id'ed divs. Store your position information in a style call like this:
#content {

}

Content within a div tag will take up as much space as it can, namely 100% of the width of the current location, or the page. So, to affect the location of a section without forcing it to a fixed width, you can change the padding or the margin elements.

For this layout, I set the two navigation columns to fixed widths and then set their position absolute, so that they wouldn't be impacted by where they are found in the HTML.

#leftnavigation {
  position : absolute;
  left : 0;
  width : 150px;
  margin-left : 10px;
  margin-top : 20px;
  color : #000000;
  padding : 3px;
}
#rightnavigation {
  position : absolute;
  left : 80%;
  top : 20px;
  width : 140px;
  padding-left : 10px;
  z-index : 3;
  color : #000000;
  padding : 3px;
}

Then for the content row, I set the margins to be somewhat relative to the outer columns.
#content {
  top : 0px;
  margin : 0px 25% 0 165px;
  padding : 3px;
  color : #000000;
}

While the page won't look wonderful in non-CSS-P browsers, as you can see, it is possible to define how your page will look without any table tags. See the HTML. See the CSS.

Previous Features