The Basics of CSS Tableless

This is a simple tutorial on how to make a basic Cascading Style Sheet tableless webpage. I will show you how to use Dreamweaver to code a tableless webpage without any knowledge of CSS coding. It is intended for non-experienced CSS coders or beginners.

In this tutorial, I will use a simple webpage with the following containers: Header, Left Column, Right Column, and Footer.

Click here to preview the page

Layout

Here is the layout:

1. Body Tag

Open your CSS Styles pallate, click on the New CSS Rule(+) icon to make a new css style.

Then the new CSS window will pop. Select Tag in the Selector Type. In the Tag dropdown, select 'body' or type in 'body'. In general, you should define all your CSS in a separate file by selecting "Define in: New Style Sheet File". But for this tutorial purpose, I'm going to write the CSS in the same file: "This document only".

Now in your CSS definition window, it allows to define almost everything with CSS. You can set style for Type, Background, Box area, Border, Padding, Margin, List style, etc. In the Box options, enter Width=770, Margin Right=auto, Margin Left=auto. This will set the html 'body' tag to 770px wide, align to center.

2. Header Tag

Now, add another CSS style and name it '.header'. Enter Width:770px, Height:130px, Background:#CCCCCC.

Go to Dreamweaver Code view and enter the following code within the body tag. Then preview your page by pressing F12 in Dreamweaver, and you should see a 770x130 grey rectangle with text "header" in it .

3. Left Column

Add another CSS class, '.left_column' and enter the following information:

Float:left is use to align '.left_column' to the left.

4. Right Column

Again, very similar to '.left_column' but this will align to right because I set Float: right.

5. Footer

Finally, add the last CSS class '.footer' and enter the following information:

Notice this time I entered Clear: right ? This will clear the right float of the '.right_column' and display '.footer' below.

6. Enter the HTML codes

Now enter the final HTML codes as follow and your page should look like this.

Editing CSS styles

At any time you can edit your CSS styles by double click on the class name or in the source code window.