How to Use CSS Positioning to Create Layouts Without Tables

Tableless Layouts Open New Design Frontiers

header area
Header area of this page. Screen shot by J Kyrnin

There are many reasons not to use tables for layout. One of the most frequent reasons people give for continuing to use them is because it’s hard to do layout with CSS. Although CSS scripting does entail a learning curve, when 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.

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. 

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. Your Web pages will reflect this approach. 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.

Different websites have different structures. To build an effective page, evaluate the structure of any given page before you assign content to it. An example page might include five distinct sections:

  1. Header. Home to the the banner advertisement, the site name, navigation links, an article title and as well as a few other things.
  1. Right column. This is the right side of the page with the search box, ads, video boxes, and shopping areas.
  2. Content. The text of an article, blog post or shopping cart—the meat-and-potatoes of the page.
  3. Inline ads. The advertisements inline within the content.
  4. Footer. The bottom navigation, author information, copyright information, lower banner ads, and related links.

    Rather than putting those five elements in a table, use the HTML5 sectioning 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

    After you’ve defined the different content areas of your site, you need to write them into 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 approach will help with search-engine optimization, as well.

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

    For a three-column layout, define three sections: left column, right column, and content.

    These sections will be instantiated using the ARTICLE element for the content and two SECTION elements for the two columns. Everything will also have an attribute identifying it. When you use the id attribute, you must ascribe a unique name for each id.

    Positioning the Content

    Using CSS, define the position for your ID’d 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 percent of the width of the current location or the page.

    To affect the location of a section without forcing it to a fixed width, change the padding or the margin properties.

    For this layout, set the two columns to fixed widths and then set their position absolute, so that they wouldn’t be affected 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, 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;
    }

    Defining your page using CSS instead of an HTML table requires a bit more technical skill, but the payoff follows from more flexible and responsive designs and greater ease in making structural adjustments to your page later.