1. Technology
Send to a Friend via Email

How to Use CSS Positioning to Create Layouts Without Tables

Tableless Layouts

By

header area

Header area of this page

Screen shot by J Kyrnin
right column

Right column

Screen shot by J Kyrnin
body and footer

Body and footer

Screen shot by J Kyrnin

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. And I will admit that there is a learning curve. But once you understand how to do CSS layout, you might be surprised at how easy it can be. And once you learn, you'll have addressed the second most common reason people give for not using CSS—“It's faster to write tables.” It’s faster because you know tables, but once you learn CSS, you might be just as quick with that.

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.

Browser Support of CSS Positioning

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. And neither of these browsers have any appreciable market share in the world today.

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 positioning 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. Note that these division are arbitrary and you might choose to divide the page in a different way. It doesn't matter what the sections are just that you have them.

  1. the header
    This is where the banner advertisment is, the site name, navigation, the article title and my byline as well as a few other things.
  2. the right column
    This is the right side of the page with the search box, ads, video boxes, and shopping areas.
  3. the content
    The text of this article.
  4. the inline ads
    The advertisements inline within the article body.
  5. 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 HTML5 sectioning elements: NAV, ASIDE, ARTICLE, and SECTION as well as the HEADER and FOOTER elements to define the different portions of the content, and then use CSS positioning to place the content elements on the page.

Identifying Your Content Sections

The first thing you should do when building a CSS positioning layout is to identify the content sections of your design. Take your layout and analyze it like I did above. At the very least you're going to want two elements to position such as a sidebar and the body.

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.

To demonstrate positioning, I will create a page with three columns, and no header or footer, but you can use positioning to create any type of layout you like.

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

  1. left column
  2. right column
  3. content

These will be defined using the ARTICLE element for the content, and two SECTION elements for the two columns. Everything will also have an id attribute identifying it. Remember, when you use the id attribute, you need to have a unique name for each id.

  1. <section id="left-column"> </section>
  2. <section id="right-column"> </section>
  3. <article id="content"> </article>

Positioning the Content

This is the fun part. Using CSS you can define the position for your id’ed elements. Store your position information in a style call like this:

#content {

}

Content within these elements 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 properties.

For this layout, I set the two 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.

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

Then for the content area, I set the margins on the right and left so that the content wouldn't overlap the two outside 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

Need More Help with HTML or Web Design?

I am available online to help you with your HTML or web design problems. Come join our community of web designers on Google+ and ask a question, join in a discussion, get help with a design, or just get inspired to do great web designs.

©2014 About.com. All rights reserved.