Remedial CSS

In my defense, let me point out that I’ve always been a back-end developer, and when I have had to do web front end stuff, it’s usually been something deliberately simple, for the lowest common denominator of browsers. So it’s only been in the last couple weeks at $new_gig that I’ve had to sit down and really understand all the clever stuff you can do with CSS layout.

It seems like it should be pretty straightforward: you basically have block, inline, float, and relative and absolute positioning; they can have fixed or percentage widths. But these sometimes interact in surprising ways, and I’d find that a common-sense design goal would be difficult-to-impossible to implement. The official W3 formatting model doc is thorough but it’s a lot to wade through. It also documents each feature in isolation, without much explanation of how they interact.

So I worked up a kind of cheat sheet, that shows what happens when you throw all this crap together on the same page. To really get the most out of it, you should bring up Firebug or the Chrome inspector, and play around with the width, position and other style settings.

Let me know if it’s useful, or what I’m missing.