Tribolum.com Making Light of Things

I’ve avoided writing about web design in Tribolum, largely because I reckoned no one would want to read it. Then I realised that no one really wanted to read stuff about my everyday life anyway. My everyday life now consists of hacking away on the keyboard, churning out a respectable demonstration of what XHTML and CSS can offer my potential client.

If you’ve been interested at all in web design, and I’m sure many of you have (you just needed to figure out how to embed those music files didn’t you?), you’d have come across the famous CSS Box Model Hack.

A box element in CSS is made up of the content area, the paddings, and the margins (we’re moving outwards here). If you specify a box to be 400px wide, with paddings of 20px and margins of 30px, browsers that interpret CSS correctly will allocate a width of 400px to the content area, 40px to the paddings (two sides) and 60px to the margins (two sides), resulting in a total width of 500px.

Browsers that interpret it wrongly (IE5 and earlier) allocate the width of 400px to the entire box, resulting in a content area of only 300px. The paddings and margins are included within the 400px you specified.

So we write code that tells well-behaved browsers 400px, and the not-so-CSS-literate browsers 500px.

For more information on how to actually do this, read Tantek’s Box Model Hack entry.