From Tables to CSS DIVs

andrew — Thu, 19 Nov 2009 02:38:38 +0000

I’ve been doing web pages for some time – back from my college days (Here’s a page about some of my old websites). The web has changed a lot since the mid 90′s when I started messing with it (anyone remember when graphics were a premium as they slowed things down). I’ve done quite a few web pages over the years – using tables for layout. I’ve been struggling with making the transition from tables to CSS divs.

I’ve been using CSS for consistent text formatting but not really for layout. Frankly the tables work fine for most of what I want to do and they make sense to me. I can split and merge cells and put tables inside of other tables. By eliminating the borders they just seem to work. I never messed much with frames – as they drove me crazy – but I’ve been stuck on tables.

So now I’m breaking down and learning how to use CSS DIVs. This has been an interesting journey – learning how to get things to work. Here are some of the key techniques I’ve learned to make the transition:

You set a background color/image for the “body” tag – in CSS you can redefine the tags themselves.
The rest of the content is in a “container” div – which usually takes up less than 100% of the width – this creates the neat effect of the outside area on a lot of modern pages.
The content within that area can be a mixture of many DIVs – often with them floating to the left or right.
Your footer is then at the bottom of the “container” DIV – using the “clear” property for it to appear properly.

I know there are a great multitude of items on the web but here’s my simplified picture (if I can teach it I know I understand it better):

A&L Enterprises Tech Line » CSS

From Tables to CSS DIVs