153

It seems that in Internet Explorer (IE) width includes padding while in Firefox (FF) it does not.

How can I make both behave the same?

1
  • You probably need to activate standards-compliant mode. Without seeing some code, however, I can't give you any more guidance than that. Jan 15, 2011 at 4:54

5 Answers 5

324
  • IE used to use the more-convenient-but-non-standard "border-box" box model. In this model, the width of an element includes the padding and borders. For example:
    #foo { width: 10em; padding: 2em; border: 1em; }
    would be 10em wide.

  • In contrast, all standards-fearing browsers default to the "content-box" box model. In this model, the width of an element does not include padding or borders. For example:
    #foo { width: 10em; padding: 2em; border: 1em; }
    will actually be 16em wide: 10em + 2em padding for each side, + 1em border for each edge.

If you use a modern version of IE with valid markup, a good doctype, and appropriate headers it will adhere to the standard. Otherwise, you can force modern standards-compliant browsers to use "border-box" via:

* {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

The first declaration is needed for Opera, the second is for Firefox, the third is for Webkit and Chrome.

Here's a simple test I made years ago for testing what box-sizing declaration your browser supports: http://phrogz.net/CSS/boxsizing.html

Note that Webkit (Safari and Chrome) do not support the padding-box box model via any declaration.

7
  • 3
    +1 for mentioning both the content box and border box models. Might want to elaborate on the differences though.
    – BoltClock
    Jan 15, 2011 at 5:30
  • 1
    @BoltClock Thanks for the impetus to answer more rigorously. Updated.
    – Phrogz
    Jan 15, 2011 at 15:00
  • Nice answer; I've been trying to remember (or find) the names of the different options for a couple of days now... +1 =) Jan 15, 2011 at 15:04
  • 4
    @whitelettersinblankpapers See why W3Schools sucks and then a far better reference which leads you to the W3C standard. Don't follow any more links to W3Schools. Further, add "MDN" to your search engine queries about web standards in the future.
    – Phrogz
    Jun 21, 2015 at 15:00
  • 1
    As of 2021, the prefixes are irrelevant for all but 0.23% of browsers - caniuse.com/css3-boxsizing.
    – Miriam
    Jan 20, 2021 at 21:25
28

A simple rule is to try to avoid using padding/margin and width property for same element. i.e. Use something similar to this

<div class="width-div">
     <div class="padding-div">
     ...........
     ...........
     </div>
 </div>
1
  • I use this method on a regular basis and never have cross browser issues with it.
    – Kevin Beal
    Jun 25, 2012 at 19:45
22

I bumped into this question and even though it's a couple of years old, I thought I might add this in case anyone bumps into this thread.

CSS3 now has a box-sizing property. If you set, say,

.bigbox {
    box-sizing: border-box; 
    width: 1000px; 
    border: 5px solid #333;
    padding: 10px;
}

your class will be 1000px wide, instead of 1030px. This is, of course, incredibly useful for anyone who uses pixel-sized border with liquid divs, because it solves an otherwise insoluble problem.

Even better, box-sizing is supported by all major browsers except IE7 and below. To include all items within the width or height dimension, set box-sizing to border-box. To aggregate other items to the width and/or height, which is the default, you can set box-sizing to "content-box".

I'm not sure of the current state of browser syntax, but I still include -moz and -webkit prefixes:

.bigbox{
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
2
1

Do you have a doctype declared? When I started coding html I had this problem, and it was from not having a doctype declared. My favorite is:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
...
</html>
1

for those who would still have the problem, jQuery provided two property outerWidth () and innerWitdh () to know the width of an object with or without borders ...

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.