How to Use CSS Positioning to Create Layouts Without Tables

Tableless Layouts

header area
Header area of this page. 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.
  1. the right column
    This is the right side of the page with the search box, ads, video boxes, and shopping areas.
  2. the content
    The text of this article.
  3. the inline ads
    The advertisements inline within the article body.
  4. 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: , , , and as well as the and 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 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.

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.

This is the HTML for a 3-column layout without using any tables.

See the CSS for the layout.
Return to the Tableless Layouts - Using CSS Positioning to Lay Out Web Pages article.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
<title>Tableless Web Pages</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<aside id="left-column">
<h1>Left Column</h1>
<ul>
<li><a href="http://webdesign.about.com/">Home</a></li>
<li><a href="http://webdesign.about.com/library/weekly/aa102102a.htm">Tableless Browsing</a></li>
<li><a href="/cs/css/">CSS Links</a></li>
</ul>
</aside>

<article id="content">
<h1>Sample Content</h1>
<p>
This is the content section of the page. As you can see, I'll use structural markup
like &lt;p&gt;&lt;/p&gt;, &lt;strong&gt;&lt;/strong&gt;, and &lt;em&gt;&lt;/em&gt;. This
will help keep the page valid in XHTML.
</p>
<p>
Consectetur adipisicing elit, ut aliquip ex ea commodo consequat. Sed do eiusmod tempor incididunt in reprehenderit in voluptate lorem ipsum dolor sit amet. Excepteur sint occaecat qui officia deserunt duis aute irure dolor. Ut labore et dolore magna aliqua. Sed do eiusmod tempor incididunt sunt in culpa excepteur sint occaecat. Ut aliquip ex ea commodo consequat. In reprehenderit in voluptate eu fugiat nulla pariatur. Mollit anim id est laborum. Qui officia deserunt. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
<h2>Lorem Ipsum</h2>
<p>
Consectetur adipisicing elit, quis nostrud exercitation velit esse cillum dolore. Ullamco laboris nisi qui officia deserunt ut enim ad minim veniam. Cupidatat non proident, duis aute irure dolor sunt in culpa. Lorem ipsum dolor sit amet, ullamco laboris nisi excepteur sint occaecat. Ut aliquip ex ea commodo consequat. Ut labore et dolore magna aliqua. Quis nostrud exercitation. Ut labore et dolore magna aliqua. Sed do eiusmod tempor incididunt duis aute irure dolor sunt in culpa. Ullamco laboris nisi lorem ipsum dolor sit amet, ut aliquip ex ea commodo consequat. Mollit anim id est laborum. Excepteur sint occaecat ut enim ad minim veniam, quis nostrud exercitation.
</p>
<p>
Eu fugiat nulla pariatur. Velit esse cillum dolore sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Cupidatat non proident, ut enim ad minim veniam. Quis nostrud exercitation velit esse cillum dolore lorem ipsum dolor sit amet. Consectetur adipisicing elit, ut labore et dolore magna aliqua. Ut enim ad minim veniam, qui officia deserunt cupidatat non proident. Velit esse cillum dolore excepteur sint occaecat lorem ipsum dolor sit amet. Consectetur adipisicing elit, sunt in culpa quis nostrud exercitation. Ut aliquip ex ea commodo consequat. Ut labore et dolore magna aliqua. Ut enim ad minim veniam. Quis nostrud exercitation excepteur sint occaecat ut labore et dolore magna aliqua. Sunt in culpa ullamco laboris nisi eu fugiat nulla pariatur. Sed do eiusmod tempor incididunt mollit anim id est laborum.
</p>
</article>
<aside id="right-column">
<h2>Right Column</h2>
<p>
Ut aliquip ex ea commodo consequat. Ut labore et dolore magna aliqua. Quis nostrud exercitation duis aute irure dolor cupidatat non proident. Lorem ipsum dolor sit amet, sunt in culpa mollit anim id est laborum. Ut aliquip ex ea commodo consequat. Velit esse cillum dolore eu fugiat nulla pariatur. Ut enim ad minim veniam, excepteur sint occaecat ut aliquip ex ea commodo consequat. Consectetur adipisicing elit, mollit anim id est laborum. Cupidatat non proident, sunt in culpa sed do eiusmod tempor incididunt. Eu fugiat nulla pariatur.
</p>
<h2>Lorem Ipsum</h2>
<p>
Ullamco laboris nisi lorem ipsum dolor sit amet, mollit anim id est laborum. Quis nostrud exercitation cupidatat non proident, ut labore et dolore magna aliqua. Ut labore et dolore magna aliqua. Excepteur sint occaecat consectetur adipisicing elit, cupidatat non proident. Lorem ipsum dolor sit amet, ullamco laboris nisi ut labore et dolore magna aliqua. Sed do eiusmod tempor incididunt ut aliquip ex ea commodo consequat. Velit esse cillum dolore sunt in culpa cupidatat non proident. Ullamco laboris nisi sed do eiusmod tempor incididunt excepteur sint occaecat. Mollit anim id est laborum. Consectetur adipisicing elit. Velit esse cillum dolore quis nostrud exercitation duis aute irure dolor.
</p>
</aside>
</body>
</html>

See the CSS for the layout.
Return to the Tableless Layouts - Using CSS Positioning to Lay Out Web Pages article.

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.

This is the CSS for a 3-column layout without using any tables.

See the HTML for the layout.
Return to the Tableless Layouts - Using CSS Positioning to Lay Out Web Pages article.

body {
  margin : 0;
  padding : 0;
  border-color : #cc0000;
  background-color : #ffffff;
  color : #000000;
}
p, ul, ol, li {
  font : 10pt Arial,geneva,helvetica;
}
h1 {
  font : bold 14pt Arial, Helvetica, geneva;
}
h2 {
  font : bold 12pt Arial, Helvetica, geneva;
}
#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;
}
#content {
  top : 0px;
  margin : 0px 25% 0 165px;
  padding : 3px;
  color : #000000;
}
#content h1, #content h2 {
  color : #cc0000;
}

See the HTML for the layout.
Return to the Tableless Layouts - Using CSS Positioning to Lay Out Web Pages article.

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.