1. The Box Model
<and how it relates to float layouts />
Advanced CSS Stephen Ireland
2. What is The Box Model?
Describing the manipulation of a block-level element through;
• Margin <div>
• Border
Magna autpatuer irit non exer ad tincinc
• Padding ipsusto dolute eum vent velenit aut lor in
erilis acidunt aciduis nulput ad modiamet,
• Height quisl ip eummodolorem am, sequat nit
nim iriuscip Em dolobor eraessi. Rilisim
• Width dolore vent ipit augiat, sed dolummod
dipsusciduis dolor iurero odio dolobortie
min eleniat. Duipit atisl in henit ulla commy
But not position.
</div>
Advanced CSS Stephen Ireland
3. The Box Model in Context
Margin Border
Padding
Magna autpatuer irit non exer ad tincinc
ipsusto dolute eum vent velenit aut lor in
erilis acidunt aciduis nulput ad modiamet,
Height
quisl ip eummodolorem am, sequat nit
nim iriuscip Em dolobor eraessi. Rilisim
dolore vent ipit augiat, sed dolummod
dipsusciduis dolor iurero odio dolobortie
min eleniat. Duipit atisl in henit ulla commy
Width
Advanced CSS Stephen Ireland
4. What Does This Mean?
If the width of a div is set to 300px;
• Add a 10px Margin
• Add 20px Padding
• And a 5px Border
The visible width of the div is calculated as;
10px + 5px + 20px + 300px + 20px + 5px + 10px
= 370px (370 pixels wide!)
Advanced CSS Stephen Ireland
5. A Necessary Recalculation
To get the div to appear as 300px wide:
• We need to adjust the width of the div accordingly
• Subtract the margin, padding and border values from 300px
300px - 10px - 5px - 20px - 20px - 5px - 10px
= 230px
The div will display as 300px wide if we set the width to 230px
Advanced CSS Stephen Ireland
6. The Broken Box Model
Internet Explorer the culprit
• Versions 5.x affected (5.01, 5.5 etc)
• Calculates widths and heights differently
• IE6/7 can also be affected (quirks-mode)
Quirks Mode
• IE6 & 7 will revert if you do not specify a DOCTYPE
• DOCTYPE needs to be first line in HTML document
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//
Advanced CSS Stephen Ireland
7. Affects On Float Layouts
Broken layouts
• The broken box model can occur in
Internet Explorer
• Widths of block-level elements (DIV,
p, h1 etc) will be different to other
browsers such as Firefox, Safari or
Opera
• Your layout may work in one browser,
but be broken in another.
Advanced CSS Stephen Ireland
8. Avoidance Tactics
Avoid box model problems by;
• Being aware of the problem and the fixes
• Cross-browser testing (Firefox, Safari, IE5.x, 6 & 7)
Listen carefully - neat trick!
• Don’t apply margins or padding to a div in order to create
space in a layout
• Apply margins or padding to the elements inside the div
(h2, h3, p etc)
Advanced CSS Stephen Ireland
