Intro to CSS-based layouts Part 1 - Block-level elements
I’m writing up a series of tutorials on CSS-based layouts. Why? Because making the transition from tables to divs and CSS can be difficult and there are often many little quirks that you only learn to conquer with practice.
In the first tutorial, I give a little intro to how block-level elements work and how people familiar with building presentations using tables can see block level elements in a familiar light.
The big question is probably “why the heck should I give up tables?” The web-politically correct answer is “because they’re meant only for presentation,” which is true. However, that doesn’t mean a whole lot in the real world. I’ll tell you personally that there are several reasons why using CSS-based layouts is easier:
- CSS is found in a single file, making for easy changes
- CSS-based layouts allow for multiple selectors acting on many different children, letting you
create much more visually attractive (if not much, much more intricate) layouts and designs - Extremely complicated table-based layouts become almost impossible to debug
- CSS-based layouts are usually much slimmer
- Tables are limiting; you can do just about anything with CSS
…and so forth. Table-based layouts are pretty quick and easy to throw together, but not much quicker and easier than CSS. When you add the time it takes to debug and change table-based layouts, and the ease of changing and freedom given by CSS (not everything has to fit in a row and a cell that’s in another row and cell that’s in another…), and it’s an easy battle.
Learn some block-level basics and start down the path of dropping tables for CSS.
