Do what I say, not what I did. Trust me.

Our story begins with a simple yet classic two-column layout for a client: the markup included a #sidebar div and #content div. The CSS floated the #sidebar to the right, and set a width of about 10em. The #content began its life with a margin-right also set at 10em.

For various reasons (another sad tale involving a disappearing background image), I tried changing margin-right to padding-right. Pay attention now: the page looked the same. And looked correct in both of my test browsers (Firefox + IE).

*The problem:* the navigation links stopped working in Firefox. Click all day if you wish; they were inert. Dead.

*The insult:* the links worked fine in IE. Aargh!!

It was as if I had inserted a *plate glass window* in front of my nav links. I could _see_ them, but couldn’t _reach_ them. Like that Rolex in the store window, just out of reach. Which is exactly what I had done: by changing the #content div from margin to padding, the #content div was now invisibly overlapping the links.

IE was just letting me get away with sloppy code, but Firefox was holding me accountable to actually get it _correct._

When someone says “You really need to understand the box model to use CSS without hurting yourself,” they’re right.