How to build a webpage using CSS instead of tables for layout and positioning

If you are like me, you started building web pages when code was written in notepad and HTML was everything you had to know. And if you are like me, you are coming back to site design and finding that thanks to CSS everything has changed – for the best .

In times gone, tables where the only tool you had to format your page and design a layout . The classic design was a 1 row, 2 columns table . On one cell you put your navigation menu , on the other cell you put your content .
Today the use of tables to design a layout is deprecated: tables are to be used only for their original scope, presenting data in a table format. To design layout there’s a much more powerful and flexible tool: Cascading Style Sheets, or CSS.
People not used to design with CSS may wonder how to arrange content in the page without the comfort of cells and tables. But the truth is: CSS allows you to design layouts faster, with more precision and less code than tables . Complex layouts that required nested tables are easier to code and easier to manage. And changing a few lines of codes on a single style sheet you can entirely alter the layout of all the pages of your site.

The logic of website layout design with CSS is quite easy. Mastering this powerful tool and design very complex, usable, eye catching pages is difficult and requires study and application. The scope of this tutorial is very basic : a guide you to design a simple two columns page . With a quick search on Google you’ll find lots of documents, tutorials and guides that will help you learn the more advanced uses of CSS.

Attention: in this tutorial I’ll write about the CSS code needed to design an example layout. I won’t explain in detail how CSS works, nor the many other options it gives you to fine tune every detail of every element that will appear on your page.

Let’s start. The most popular layouts you can find on the web can be represented by figure 1.

In a 2 columns layout we have an Header area (with logo and name of the website), a Navigation area (with links to the various subpages of the website), a Main Content area and a Footer area (with credits, copyright and contact details).

You used to generate the layout using the following code:

If you wanted to change something in your layout, say change from vertical navigation on the side of the page to horizontal nav bar under the header, you had to change every single page of your site.

How do we design the same layout using CSS? Using the float attribute. Using CSS you basically divide the content of your page in blocks, delimited by the /…/ tags. The float attribute allows you to place (float) a portion of your content along the right or left margin of your block. The rest of the content of that block will flow around your floating portion.
Let’s do it. We’ll need an HTML page and a CSS style sheet.
Let’s look at the HTML first.

As you can see, we have divided every logical portion of our page in blocks. As you can see, all the elements of our page (header, footer, navigation and content) are contained in a block called container, that basically is the whole page. We’ll place our elements inside the “container” space. As you can imagine, we are going to float the navigation block to the left of our “container” block.

Here’s the code to work the magic.

As I said, I won’t go into details here, explaining what every command means.
But let’s review it quickly, pointing out what interests us.
First of all we assigned the font for the pages, specifying its attribute . We also assigned a formatting to the H1 and H2 tags .

The “div#something” calls are where we assign a formatting and a specific behaviour to each of the blocks we defined in our html .
Please note the calls for navigation and content . We assigned to the navigation the “left ” property, placing it on the left side of our page. Then we defined the column width and the main content margin from the column.
Please note the “clear:left” attribute we assigned to the footer . A common mistake is forgetting this attribute to the footer. If you forget it, your footer will not be placed at the bottom of the page , but at the bottom of the main content area and on the left of your navigation area. If the navigation area is longer than your main content, it will extend below the footer. Using the “clear:left” attribute we avoid this common mistake .

You can argue that we can get to the same result with less effort and less code using tables. But remember: this is only a very quick how to, I only touched the very surface of CSS to answer the common question: how do I design a tableless page with CSS?
To give you an idea of the power of CSS, if we want to change from vertical navigation to horizontal navigation, everything we must do is change a few lines of code in our CSS and the layout of all our pages will change.