home of the “design for the web” coursean adult course focused on webstandards based webdesign

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).
box model diagram
3D diagram by Jon Hicks
3D CSS box model

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

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

Tantek Celik
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


One Comment

  1. 1 Gravatar

    Hi all

    Just testing my pic…..

    If its not loaded,
    il be back.