Boxing Day

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 <strong>needed</strong> to figure out how to embed those music files didn't you?), you'd have come across the famous <a href="">CSS Box Model Hack</a>.
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.
<div style="text-align:center">400px + 2(20px) + 2(30px) = 500px</div>
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.
<div style="text-align:center">400px – 2(20px) – 2(30px) = 300px (which is your content area)</div>
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 <a href="">Box Model Hack entry</a>.

Leave a Reply

Your email address will not be published. Required fields are marked *