Just Write

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

Our story begins with a sim­ple yet clas­sic two-​column lay­out 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 var­i­ous rea­sons (another sad tale involv­ing a dis­ap­pear­ing back­ground image), I tried chang­ing margin-​right to padding-right. Pay atten­tion now: the page looked the same. And looked cor­rect in both of my test browsers (Fire­fox + IE).

The prob­lem: the nav­i­ga­tion links stopped work­ing 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 win­dow in front of my nav links. I could see them, but couldn’t reach them. Like that Rolex in the store win­dow, just out of reach. Which is exactly what I had done: by chang­ing the #content div from mar­gin to padding, the #content div was now invis­i­bly over­lap­ping the links.

IE was just let­ting me get away with sloppy code, but Fire­fox was hold­ing me account­able to actu­ally get it cor­rect.

When some­one says “You really need to under­stand the box model to use CSS with­out hurt­ing your­self,” they’re right.