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.