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 Çelik
speaker profile on A List Apart
- Tantek’s PBwiki
- the famous box model hack