• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL
Help

How the Box Model Breaks

If you've been paying attention, you will already have a clue about the way the box model breaks in early CSS implementations such as the one in IE 4 through IE5.5/Windows. In these browsers and in IE/Mac prior to 5.0, width and height values intended only for the content area are instead applied to the entire box (excluding margins).

Figure 12.3 shows the broken box model in action. To revisit the previous example, in IE4–5.5/Windows, if content width is 400px, padding is 50px per side, and border is 2px, the overall width will still be 400px instead of the correct 504px—and the content area will be squeezed down to 296px (400 – 50 – 50 – 2 – 2). The higher the padding and border values, the farther your layout will depart from your intentions and the tighter your content area will be squeezed.


PREVIEW

                                                                          

Not a subscriber?

Start A Free Trial


  
  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint