Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

The Box Model

  • Login to see the comments

The Box Model

  1. 1. The Box Model <and how it relates to float layouts /> Advanced CSS Stephen Ireland
  2. 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. 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. 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. 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. 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. 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. 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

×