design for the web

the box model

29/09/2011 1 Comment

With the basics covered, your coding needs to expand in order to give you more control over your layouts – time to tackle the famous box model. For this one – I’m pointing you to some excellent references online which will explain in detail the principles and problems (for IE6 and earlier) involved.

To illustrate the box model for visual reference – here are 2 diagrams to clarify (note: click the images for a larger view).

3D diagram by Jon Hicks

Here are the classic must-read articles and some more:

• box model on CSS Discuss Wiki
• Internet Explorer and the CSS box model on 456 Berea Street
• CSS positioning on brainjar.com
• The CSS Box Model on sitepoint
• Margins, Padding & The Box Model on Spyre Studios

And of course – the box model cannot be mentioned to you newbies without introducing you to another respected Veteran, Tantek Çelik

photo: August 19, 2008 © Adrian Q

Tantek has been – and still is – very influential in many areas such as W3C specifications, standards, micro formats and so much more. You should read up on him and find out for yourself :)
Personally, I’ll always remember reading the story of the box model hack and comments on this by many others. What a stroke of genius.

Tantek online

• tantek.com
  personal site
• Tantek Çelik
  speaker profile on A List Apart
• Tantek’s PBwiki
  public PBwiki
• the famous box model hack

tags: code HTML