152

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?

Armen Michaeli
  • 8,625
  • 8
  • 58
  • 95
Jake
  • 11,273
  • 21
  • 90
  • 147
  • You probably need to activate standards-compliant mode. Without seeing some code, however, I can't give you any more guidance than that. – Jeff Hubbard Jan 15 '11 at 04:54

5 Answers5

322

  • 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.

Peter van Kekem
  • 1,387
  • 1
  • 12
  • 30
Phrogz
  • 296,393
  • 112
  • 651
  • 745
  • 3
    +1 for mentioning both the content box and border box models. Might want to elaborate on the differences though. – BoltClock Jan 15 '11 at 05:30
  • 1
    @BoltClock Thanks for the impetus to answer more rigorously. Updated. – Phrogz Jan 15 '11 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 =) – David Thomas Jan 15 '11 at 15:04
  • No one cares about opera. – Michael J. Calkins Jan 26 '15 at 23:24
  • Sir, you mentionned `padding-box` for Webkit at the end of your answer. I don't find it among possible values here: http://www.w3schools.com/cssref/css3_pr_box-sizing.asp, thank you – Adib Aroui Jun 18 '15 at 14:56
  • 4
    @whitelettersinblankpapers See [why W3Schools sucks](http://www.w3fools.com) and then [a far better reference](https://developer.mozilla.org/en/docs/Web/CSS/box-sizing) which leads you to [the W3C standard](http://www.w3.org/TR/2015/WD-css3-ui-20150519/#propdef-box-sizing). 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 '15 at 15:00
  • 1
    As of 2021, the prefixes are irrelevant for all but 0.23% of browsers - https://caniuse.com/css3-boxsizing. – Artemis Jan 20 '21 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>
shankhan
  • 6,343
  • 2
  • 19
  • 22
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;
}
LionC
  • 3,106
  • 1
  • 22
  • 31
Mason Barge
  • 409
  • 4
  • 4
  • Yes, and Paul Irish has a nice blog article about this here: http://www.paulirish.com/2012/box-sizing-border-box-ftw/ – Dave Burton Jan 30 '15 at 14:55
  • How this answer has so many upvotes when is the same answer as the accepted one which was written is 3 years before? – dippas Sep 02 '18 at 14:34
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>
tybro0103
  • 48,327
  • 33
  • 144
  • 170
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 ...

kkica
  • 4,034
  • 1
  • 20
  • 40
Patrick
  • 31
  • 2