Two column layout, without tables

Table designs are still used a lot, but most of the time, there is an easy solution to it. I already pointed out that you can center your layout without the use of tables.

There is also a better way to make a two columns layout without tables.

First the HTML part:
Create two <div>s, one for the left column (we’ll call it menu) and one for the right column (we’ll call it contentarea). Your code will look like this:

<div id="menu">
  <p>Your menu goes here</p>
</div>
<div id="contentarea">
  <p>Your main content.</p>
</div>

That’s all for your HTML code (except for the contents of course). This is already a lot smaller than your table design.

Now let’s take a look at that css code:

#menu {
  width: 200px;
  float: left;
}
#contentarea {
  margin-left: 200px;
}

Again, that’s all there is to it. Nothing more. Is this small or what!?

You can now adjust it to your own layout, by applying background colors or images, borders,…

No Responses to “Two column layout, without tables”.

Comments are closed.