Posted on by

Two-Column Tableless Layout – Step 1

Lots of people claim that making a site using CSS divs instead of tables is horribly difficult. Well, I tend to disagree. It’s just different, and if you don’t know any CSS, it might feel difficult.

So, I’m starting a step-by-step tutorial on how to make a nice looking page using a 2-column tableless layout. I try not to use any hacks in my tutorials or templates, so you can expect the same here.

Let’s begin without further ado.

Open up a text editor and start your basic page skeleton. Here’s what I’ll use for the tutorial:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">

<head>

<title>Two Columns</title>

<meta http-equiv="content-type" content="text/html; charset=utf-8" />

<style type="text/css">

</style>
</head>
<body>

</body>
</html>

(Note: I have a plugin on WordPress that will automatically make uppercase acronyms of certain words like HTML. Keep in mind that those should all be lowercase in the code.)

Now that you have your code skeleton, you need to put in your basic content. We’ll create four primary sections: A header and a footer, a menu and a content area.

In the body section, you’ll create those sections using divs named accordingly. First let’s add the header:

<body>
<div id="header">
<h1>Header</h1>
</div>

Then right below that, we’ll put in a menu.

<div id="menu">
<h2>Menu</h2>
<ul>
<li><a href="#">Link one</a></li>
<li><a href="#">Link two</a></li>
<li><a href="#">Link three</a></li>
<li><a href="#">Link four</a></li>
<li><a href="#">Link five</a></li>
</ul>
</div>

Then a content area that we’ll just fill up with little Lorem Ipsum paragraphs for now.

<div id="content">
<h2>Content</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
(Repeat the above paragraph another time or two.)
</div>

And finally, a simple footer.

<div id="footer">
<p>Footer</p>
</div>
</body>

Just so that we can see the different div sections clearly, I tend to use color at first to distinguish them better. Add the following four rules (each one doing nothing more than setting a background color) to your CSS area for now:

<style type="text/css">
/* Main div blocks basic styling */
div#header { background-color: fuchsia;}
div#menu { background-color: silver; }
div#content {background-color: teal;}
div#footer {background-color: fuchsia;}
</style>

If you followed those directions, you should see this:
Two column layout unstyled

Now, let’s make those columns move a bit into place. What we are going to create is a two-column fluid layout that will use percentages.

The header is already where it needs to be, so we don’t need to change that. Let’s now add some CSS rules above those others to tell the browser that we want the menu to be 30% of the page width and the content 70%. Additionally, we want to put the menu to the left hand side of the page, and then make sure the content comes directly on the right of that menu. So we use the float:left rule to tell the divs to move in that left direction.

Add the following in the top of your CSS (above the other rules you have there for background-color):

/* Main div blocks */
div#menu { width: 30%; float:left;}
div#content {width: 70%; float:left;}

It should look nearly there, but wait… because that footer is still there unstyled, and it needs to be told to ignore the floating going on above it because we want it to be all the way across – just like the header. So… add this below the two rules you just added:

div#footer {clear:left;}

The page should now look like this:
2 column styled layout

Now you should have a very simple 2-column tableless layout that you can build on.

~Nicole

Continue with Step 2

Published by Nicole Hernandez

5 Replies to “Two-Column Tableless Layout – Step 1”

  2. Thank you – Nicole. Dabbled with design a few years ago, but things came up and had to abandon my journey. Now that I have a little time and a desire to setup a personal company website, your tut gave me a head start to being table free.

    I had started trying to navigate W3C to refresh myself with XHTML and CSS, but they don’t seem to be the site I remember. So now I just keep repeating to myself… “Google is your friend!”

    Continued Success…
    ~ Steve

  3. this post is more than 1 year but it is still fresh tutorial. very nice presentation tutorial.its organize and very easy to understand. keep it up

Comments are closed.