Tableless Layouts

There are many reasons not to use tables for layout. But one of the number one reasons people give for continuing to use them is because it’s hard to do layout with CSS. But once you understand how to do CSS layout, you might be surprised at how easy it can be.
There are two ways you can do layout with CSS:
This article will explain how to use CSS positioning to build the layout for your web pages.
CSS positioning is well supported in all modern browsers. Unless you are building a site for Netscape 4 or Internet Explorer 4, your readers shouldn’t have any trouble viewing your CSS positioned web pages.
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. Because the content can be placed anywhere you’d like in the layout — even layered on top of other content.
For example, this About.com article can be divided into five content parts:
the header
This is where the top breadcrumb trail is, the banner advertisment, the site name, navigation, the article title and my byline.the right column
This is the right side of the page with the search box, newsletter signup box, ads, and video boxes.the content
The text of this article.the inline ads
The advertisements inline within the article body.the footer
The bottom navigation, my photo and bio information, copyright information, lower banner ad, and so on.
Rather than putting those elements in a table, I can use the DIV tag to define the different portions of the content, and then use CSS positioning to place the content elements on the page.
For this article’s example, I will create a page with three columns, and no header or footer.
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 the most important parts of your page first. This will help with SEO as well.
For my three column layout, I’m going to have three sections:
left navigationright navigationcontent
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.

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;
}

As you can see, it is possible to define how your page will look without any table tags. See the HTML. See the CSS.
Current Web Design and HTML Features
View the original article here