Ripping out tables

If you need to get started on CSS, you want the CSS basics tutorial.

Before we start

This page was not really written as a tutorial. It is an account of what I went through when I turned my site table-less. I'm aware that many people visiting this page would like to learn how to turn their site table-less. Though reading my account will definitely help, here are my suggestions for how to get going:

Before doing anything else, read the CSS positioning tutorial at westciv; never mind if you don't understand everything, it'll sink in with practice.
Go and look at the template layouts at The Noodle Incident, Blue Robot and Glish; choose one which is pretty close to the layout you want to achieve.
Be aware that IE5.5 windows understands the box model incorrectly; this is a very important point to understand - don't hesitate to mail me if you're stuck with this (but read Tantek's page first, uh!)
Bear in mind that most layouts will break in Netscape 4.x - a list of Netscape 4.x-compatible CSS layouts is however available.
Go through the links on the sidebar - they are what will really help you.
If all else fails, get help!

If you need to know why you should give up tables, read Eric Costello's Introduction to CSS Layout.

There. Now this has been said, enjoy my adventure.

Introduction

Many people have started experimenting with table-less layouts since the WaSP's Browser Upgrade Initiative. Here is my story, as well as the inevitable resources to keep you going while you rip out your own tables. A hearty thanks to all those who gave me a hand, and to all of you who simply stopped by to take a look.

You might want to keep this little sketch handy to see where we are going. And if you want the whole messy adventure, dig in my secret development directory. Yes, I'm a messy girl... ; )

Show divs!

Getting elements to sit next to each other

My first problem was that I wanted a little logo in the upper right hand corner and a little poem in the upper left hand corner, 10px from the top of the window and 20px from the edges. Seems simple, uh?

My first intuition was: leave the first box static, and float the other one to the right. Doesn't work. I tried all sorts of things. Didn't work either.

Finally, it came down to the obvious. Treat the two little boxes as columns, and apply this box lesson. It's the double float: left trick, for those who know it already. I knew the trick - I just wanted to find a more "natural" way of doing it. I failed.

Now, as you're not really making columns, but sticking stuff in the upper corners of your page, you'll need to set width: 50% for both the boxes. And tell the left one to text-align: left and the right one to text-align: right. That pushes the actual content of the header elements into the corners.

Then, if you're like me and you want to avoid IE5.5 fudge as much as possible, you'll take care not to put any left or right margins (or padding!) on these two little boxes. Put them on the <body> or on a wrapper div.

A wrapper div for the header

I know. I don't like wrapper divs either. But they do come in handy at times. See, you're probably going to want to put one of those snazzy column layouts on the rest of your page. Now trust me, if you don't put a static wrapper div around your header, you're going to run into really nasty problems. Well, that was the end result when I thought I had finally managed to find a solution.

As I said, one advantage of the wrapper div is that you can specify left and right margins on it so that your little header elements don't stick to the sides of the page. You could put those margins on the header elements themselves, but as I have just mentioned, you'll have to add some IE5.5 fudge if you want them to look the same in "all" browsers. You could also put the margins on the <body> itself, but a) maybe you don't want a margin on the whole body - and more important b) I recall it doesn't work in one of the "big browsers" that I was testing in (don't ask me which one, please!).

Now, what about the top margin? If, like me, you don't want your little header elements to stick to the top of the page, you need a top margin. If you put it on the body, it might not work in "all" browsers (it didn't with me). If you put it on the header div, you'll probably have to add IE5.5 fudge for the height - as the height of the header div needs to be fixed for the column layout underneath to work.
You'll see.

So there we are: apply the top margin to the little header elements themselves.

Margin or padding?

Only, for some unknown reason, I ran into another problem. I applied margin-top: 10px to both my little floating header elements. Unfortunately, in one of the browsers (I'm sorry - I didn't take notes, and they are all muddled up in my memory... but I think it was IE5 mac), the top margin was not applied correctly to the first header element (the little poem). I took out my magic wand, turned margin-top: 10px into padding-top: 10px - and the trick was done.

No IE5.5 fudge!

See what we've done? By applying the appropriate margins to the appropriate elements, we've worked our way out of the box model hack. We apply left and right margins to elements whose width is not specified, and top and bottom margins to elements whose height is not specified.

Cool, uh?

Three columns

Now for the columns. One great pain of viewing table layouts in browsers like lynx (who don't support them) is that you first have to wade through menus and sidebars before reaching the content (the left cell of a table comes first in the code, doesn't it?). With a div-based layout and css, your "coding order" need not be the "viewing order".

In addition to that, with CSS you get more control over how a page reacts when it is resized. Do you want all divs to shrink and expand, will one or two of them be fixed-width, or do you even want one of the to pop down to the bottom of the page when the window gets too narrow?

I wanted a rather static left column, but not too much. Something like width: 20% seemed fine to me. Ideally, I would have liked the right sidebar to be pushed down the page when the window gets narrow, to leave enough reading space for the content. The only way this can be achieved is with float - and float can be a pain at times.

Between what I wanted and what I had, here is what I get: two absolutely positioned divs for the side, and one static content div with percentage margins and unspecified width. This layout has been explained too many times for me to go over it again. See versions of it at The Noodle Incident, Blue Robot, and Glish.

::: discussion ::: (3)