Fork me on Github
Fork me on Github

Joe Dog Software

Proudly serving the Internets since 1999

up arrow A Three-Column CSS Layout

Your JoeDog has a new look and feel!

The theme remains the same but we’re rocking a better architecture. The previous version was close to six years old and I made a poor design decision. What was that? I used HTML tables instead of CSS. It was a bad decision then but it’s inexcusable now. Don’t use HTML tables …. ever!

Why’s that?

CSS has numerous advantages over HTML.

  1. It eliminates the need for a clipboard. If somebody refers to you as a copy-and-paste programmer, that’s not a compliment. Redundant code is hard to maintain. CSS allows you to manage pages with a single file.
  2. HTML tables contain large amounts of markup. With CSS, you can reduce much of that, lower your site’s overhead and create faster loading pages.
  3. Site redesign is so much more efficient with CSS because it decouples content from its presentation.
  4. CSS is better for SEO because it boosts your content to code ratio and it better enables you to signal which items you want to emphasize.
  5. And the biggest reason CSS is superior to HTML: NO SPACER.GIFs

Now Your JoeDog is no CSS design expert but he knows what he likes: a header and three columns — one for navigation, one for content and one for ads. You’re not blocking his ads, are you? They help pay the bills.

Fortunately, Matthew James Taylor is a CSS expert. To create this new design, Your JoeDog incorporated his Three-column Holy Grail. Taylor achieves cross platform compatibility and SEO friendliness without resorting to hacks, images or javascript. The design uses 2-1-3 column ordering. So while you’re viewing these words in column number two, search bots are viewing them in column number one. Clever!

I highly recommend his templates. If you’re having difficulty implementing them, feel free to steal code and ideas from this website. (In particular, look for the .main #content tag. Your JoeDog used that to prevent Taylor’s floating blocks from crushing his margins and padding.