CSS box model hack

July 24, 2007 at 5:41 am Leave a comment

 CSS box model hack alternativeThe box model hack is used to fix a rendering problem in pre-IE 6 browsers, where by the border and padding are included in the width of an element, as opposed to added on. For example, when specifying the dimensions of a container you might use the following CSS rule:

 #box { width: 100px; border: 5px; padding: 20px; }

 This CSS rule would be applied to:

<div id=”box”>…</div>

This means that the total width of the box is 150px (100px width + two 5px borders + two 20px paddings) in all browsers except pre-IE 6 versions. In these browsers the total width would be just 100px, with the padding and border widths being incorporated into this width. The box model hack can be used to fix this, but this can get really messy. A simple alternative is to use this CSS:

 #box { width: 150px; }

#box div { border: 5px; padding: 20px; }

And the new HTML would be:

<div id=”box”><div></div></div>

Perfect! Now the box width will always be 150px, regardless of any browser


Entry filed under: css.

CSS Centering Block vs. Inline Level Elements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Trackback this post  |  Subscribe to the comments via RSS Feed

Flickr Photos

Blog Stats

  • 720,244 hits

%d bloggers like this: