Quick Tip: Did Internet Explorer get the Box Model Right?
videos

Quick Tip: Did Internet Explorer get the Box Model Right?

on Jun 11th 2010 with 140 comments
Tutorial Details
  • Completion Time: 5 Minutes

The CSS standard states that borders and padding should be applied on top of the specified width of an element. As such, if I have a 200px div, and apply 40px worth of borders and padding, total, the width will then be 240px. This makes perfect sense; however, Internet Explorer actually did things differently. They adopted a model where the maximum width is what you specified. The borders and padding are then factored into that width, reducing the content area. As a result, the width of the element never exceeds the stated width of 200px.

As we mostly work with extremely sensitive floated layouts, where even the addition of a 1px border can break the design, I wonder: did Internet Explorer get it right?


Subscribe to our YouTube page to watch all of the video tutorials!
Prefer to watch this video on Screenr?

Box Sizing

“The box-sizing CSS property is used to alter the default CSS box model used to calculate widths and heights of elements. It is possible to use this property to emulate the behavior of browsers that do not correctly support the CSS box model specification.”

This means that, if you should decide that you want to mimic Internet Explorer’s original interpretation of the box model, you can. The default value for box-sizing is “content-box.” This simply means that the width and height of an element do not include the borders and padding (or margins).

By changing this value to “border-box,” the width and height values then include the borders and padding.

#box {
 width: 200px;
 height: 200px;
 background: red;

 padding: 10px;
 border: 10px solid black;

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

Because we’ve declared box-sizing with a value of “border-box,” the final width of the #box element, styled above, will be 200px.

Especially for floated layouts, this can save you a lot of headaches! But with that said, I’m still undecided. What are your thoughts on Internet Explorer’s interpretation of the box model?

 
Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By

Rollover to read this author's bio or click through to see a full list of posts by this author.

I'm the editor of Nettuts+, and love making the process of building for the web as easy as possible. I'm incredibly passionate about modern software development, and am the author of Laravel Testing Decoded! If you want be friends, say hi on Twitter.  

Plus Premium
 
 
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
← Older Comments
Newer Comments →
  • http://www.scottnelle.com/ Scott Nellé

    I always felt that the IE implementation was smarter. It places the burden of calculation on the computer (isn’t that what they’re for?) instead of the developer. Granted the calculation uses simple addition, but I’d rather let the computer do the math. Of course I decided to deal with doing it the W3C way, but I’ve always felt that IE’s implementation made better sense.

    • Steffen Wieprecht

      Also my opinion, when I specify a total width I don’t want to have it destroyed by a totally different attribute… I respect what W3C is doing but this one thing is definitely something that traps a lot of beginners

    • http://www.umbraprojekt.pl mingos

      Yeah, IE is more intuitive (damn, I never thought I’d write something like that). Whenever I apply padding and borders, I have to watch out not to write “400px” instead of the “378px” or something similar that Firefox expects me to write. A minimal change requires recalculating everything – what a nuisance! Plus, IE’s way makes it possible to apply padding in ems and still have a pixel-perfect layout.

      • http://blackmesalabs.com Leo

        I wouldn’t agree except that last point is a killer. I HATE adding extra markup just to get some padding on a single element. Most browsers support selectors that fix this now but, you know that’s a whole other rabbit hole.

  • http://www.pataltechnologies.com Tom

    IE’s way makes more sense to me. It’s annoying to have to do the math of accounting for borders and padding when declaring a width.

    • http://diegop.com Diegop

      I agree. IE its right in this (only in this)

      Padding and Border must be “inside” a Box to me.

  • http://slightlymore.co.uk/ Clinton Montague

    I’m totally on the W3C’s side here.

    If I want an element’s contents to be 200px wide, I want it to be 200px wide. Then I’ll add the margin/padding to that. I always start developing with the width of the (for example) copy space, then adjust the margins and paddings to position it where I want. As a developer rather than a designer, I find that this makes for a more pleasing and easy workflow; I can ask how wide a content area should be, then can adjust its gutters accordingly.

    I agree that from a purely mathematical and developmental point of view, the IE model might be easier to work with to start with, but in the end, the W3C model makes more sense (and in my opinion) easier.

    • foljs

      If I want an element’s contents to be 200px wide, I want it to be 200px wide. Then I’ll add the margin/padding to that.

      Do you WANT it to be 200px wide or not? Because the border and the padding is part of the box.

      • http://jamesmcminn.com James McMinn

        The fact that he specified he wants the contents itself and not the box to be 200px wide answers your question.

    • http://thinktankdesign.ca Robert Hurst

      I understand what your saying, I just don’t know if I agree that the width of the content area is important. And the way CSS floats things, it could care less about how big the content area is. Seeing as most of us have had issues with the way the W3C made the box model, I think that making the width the over all size is much better.

      On another node, I’m glad to see that our generation of developers and designers talk about issues like this. I know that the dinosaurs from the 90s had a hard time critically evaluating the languages that they used, and making the decision to make a language better instead of leaving it the same because they were use to it, or scared of things they didn’t know about.

  • http://webkicks.dotink.org Matthew J. Sahagian

    The W3C Standard places emphasis on the content as opposed to something that is purely stylistic. While this model makes nice sense for percent widths with fixed padding, i.e. 100% with 10px padding instead of having to do 1 – 3% width which on large resolutions could be too much and on small ones be too little…. it serves little purpose for any other content driven design.

    • Andy

      To criticise this interpretation for being purely stylistic when talking about a technology who’s primary function is to style seems to be somewhat of an oxymoron.

      • http://webkicks.dotink.org Matthew J. Sahagian

        To style what? Oh, that’s right, content.

        What is meant by purely stylistic is that padding really has no bearing on the content itself. Things that change the nature or flow of the content itself color, font-size, width, float, etc… are a fair bit different from things that change the nature or flow of the content ONLY with regard for such things, i.e. background-color or background-image, padding, margin, etc.

        Padding can ONLY affect the nature or flow of content with regard to width. What the article is essentially recommending is that the PROPER way to do things would be to have no means by which to set width directly on content… but then of course you will say “just set a padding of 0″ — and therein the point is lost.

        They are separate because they are separate things, and indeed, one is PURELY stylistic.

    • farfique

      well well…it’s little “novelgentry”…..The self-congratulatory sociopath from Lowell Mass.

      You’ve got a mountain of bad karma coming your way, chum.

    • samarjit

      @Matthew J. Sahagian

      As you said you want the content size should be of the given width say 200px; Well thats a good idea, if you are do not ever think of putting a padding or a border and think that your layout will fit all form factors without spilling a bit on the bottom or on the right triggering scrollbars. You are more worried about the content then write it in XML and let the users see it. CSS is only used for styling, and it cannot do that well.

      But do you know what it takes to write a javascript UI component like ExtJS or jQuery UI, which are having window like structure there are a lot of images and borders and boxes within boxes neatly places and yes with borders and padding. Because of this buggy CSS specification everywhere they have to specify the maximum width and height of all elements in pixels and when ever the outer width of the widget changes then every width height has to be recalculated.
      Had it been a logical CSS implementation, (I would suggest even include the boder width inside the width calculation (unlike IE implementation which leaves that outside) then there would have been fewer components required to create these complex layouts.

      There is one more way to get around with this CSS bug, no not elegant but it might work.

      width: 100% – 10px

  • http://ryan.thejenks.me Ryan

    Yeah, I hate to say it but, if everyone had adopted Microsofts box-model approach years ago, we would all be doing much less calculation and have many fewer headaches.

    Any chance of this changing in the future? Could we make a sudden grassroots push to get it implemented in CSS3?

  • http://tyfujimura.com Ty Fujimura

    Never really thought about it, but IE is right on here. I think I’m going to start integrating the border-box tag into my css resets.

    • http://www.pixelfuelmedia.com/ Johnny Freeman

      +1 – That’s a great idea!

    • David C

      That is exactly what I was thinking, Ty!

      You could easily at this to a reset file for all block level elements and (theoretically) forget about it.

      One could debate that it’s hackish and possibly wrong, but so it the reset file anyway. Isn’t it?

      Designers created the reset file to level the playing field. This could add to that, I think.

    • http://www.alfystudio.com Ahmad Alfy

      That’s the way we should code! Thumb up!

  • http://ingo-fahrentholz.com Ingo Fahrentholz

    Very nice example with the Grid framework. Now I have understood correctly why the Internet Explorer sees it. And I must unfortunately admit that it really, in some cases totally logical and easier. No count = faster work.

  • Will Moyer

    I always felt that padding should reduce the content area – a la’ IE – but that margins should add to the total width/height.

    Just me?

    • Will Moyer

      Nevermind that is exactly how IE does it.

  • http://www.digitalvaldosta.com Digitalvaldosta

    I have always said that since their is a committee of people who come up with the rules (W3C) then the companies that program the browser should at least follow the specifications. If they want to add other functionalities then thats fine. We shouldn’t, as designers, have to fix their mistakes. We should all just be standards compliant.

    • Grant

      Not sure its that cut and dry. IE is the standard, and I don’t think that it’s fair to *expect* any company to take orders from the W3C. At the end of the day, W3C specifications are just a method of allowing a “write once, show everywhere” environment. That environment doesn’t really help Microsoft any, because if they make their browser completely unique, developers would have to choose between IE and everyone else (which is what, 70% vs 30% combined?). When IE adopts standards, they are opening themselves up to a lot of competition. All the idealistic zealots, may want to bark about standards and that W3C specs being a baseline, but it just seems ridiculous to *expect* a company to invest money and time to develop a product to another organization’s specifications when doing so would open them up to competition and erode the marketshare they have earned.

      ** Apparently, avoiding the ‘write once, develop everywhere’ environment is only cool when Apple does it ;)

  • http://www.xcellence-it.com/ Xcellence IT

    Hey, I didn’t know this property earlier… It has wide scope of implementation… thanks for sharing this great tips….

    I hope this would help me lot in all our projects.. I recommended your article to all my team member to read.

    Thanks
    Xcellence IT

  • Vishu

    thanks! really helpful tip and handy css property, i personally feel that IE got this one right.

  • Sathish

    This is great, but what about older versions of Firefox and webkit based browsers?

    won’t the layout be broken in say Firefox 2?

  • Fatih

    define a doc type and dont mess such things.

    add this

    to top of your code even html tag

  • Callum

    Interesting perspective. Thinking about it from both sides I’ve come to the conclusion that the W3C Standard is “technically” correct even while IE’s box model takes the more logical approach. Seeing as I work with mostly code (as opposed to design) I think that W3C’s Standard is the “correct” way. However, props to IE for trying to make things easy and logical for web designers/developers.

  • http://www.ifadey.com Fawad Hassan

    I know the IE way is easier but I prefer to stick with standards because this makes our life easier in future.

  • http://www.myunv.com/ Sunny Singh

    Even though it’d be a lot easier, especially when first starting to learn CSS, I still feel like we’d be doing some sort of math.

    W3C’s model is saying that if you set the width to 980px, then the content area will be exactly that. The text will never be on the borders so it wouldn’t make sense to have it included in the width.

    IE’s model, even though it seems easier will still make you think of how much content area you have. That means that I’d be subtracting the borders and padding to find out the exact width of the content. So if I set a width of 980px and have 10px of padding, won’t the actual width be 960px? We’d be doing almost the same math we’re doing now.

    I may be misunderstanding IE’s model but that’s how I look at it. If it is still easier for you though, box-sizing will be very handy in the future; especially for fluid-width layouts.

  • http://www.martin-mates.cz Martin Mates

    Hi Jeffery. Can you write down the name of the plugin for measuring elemnt sizes? It was like ex scope? Thank You!

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      xScope

  • http://www.alfystudio.com Ahmad Alfy

    I ain’t gonna say IE was smarter cause IE is shit and all of you know that. They implemented it wrong that’s all.
    On the other side I was definitely frustrated sometimes when I had to do these math calculations and when I had to change a width of one column on a multi-layout columns it was painful!
    I think box-sizing is a smart way to get all this done! We should drop what we used to do and stick with this approach. It makes more sense.

    Question, does box-sizing work on IE6?

  • Chris

    I definitely think IE’s way is easier and more intuitive right now. I’m still coming up with a reason the W3C’s way is easier and more intuitive. I want to understand what the logic was behind the W3C doing the box model the way they did it.

  • http://craigps.info/ Craigsnedeker

    IE’s first win.

  • Dave

    Jeff,
    Your reasoning is compelling. I like the code tips, too. Anyone who can get me, a proud IE detester, to reconsider my opinion has impressive rhetorical skills! Have you considered going into politics? Just kidding!

    Really nice job!

  • Dan

    Neither are right or wrong, the point of a standard is that everyone does the same thing, so that stuff doesn’t break.

    Can you imagine if the javascript engine in IE interpreted the + symbol to mean subtraction, but in other browsers it meant addition. None of your javascript would work in IE, regardless of who’s interpretation was correct or better, that isn’t the point.
    It isn’t microsoft’s place to decide that they know better than the people who created html, because for one, they don’t, and two if they wanted a say in it, they should have got involved.

    So frankly no, microsoft did not get the ‘html 4 box model’ right, because what they implemented was not the html 4 box model, it was something else.

    Was that something else good? quite possibly.

    Is that at all relevant? Nope.

  • Carlos

    W3C rules are content-centric while IE is layout-centric. The web is about content. Layout is there to contain that content. But people “read” content not layout. W3C is right not IE.

    Also, I agree that if Microsoft thought their way was right, they should’ve gotten involved early in the W3C and helped form a standard instead of making their own (they have never been open source friendly). Besides, have you looked at the code that their software like MS Word creates for HTML markup. Hideous. If you use MS Word for coding HTML, I feel bad for the extra work you need to do to strip all the junk out.

  • http://www.dynamicguru.com Mujtaba Ahmed

    As a beginner, I used to hate Firefox for not including border and paddings in width by default , but then I grew accustomed to calculating the size of box manually keeping in mind the paddings and borders.
    But I do sometimes feel IE’s method was better .

  • Chris Sanders

    I’ve never had a problem with IE8 as far as the box model goes. I am assuming he’s talking about IE before 8. I missed that when I was watching the video.

  • JT

    When I first started learning HTML/CSS about a year ago it always struck me as odd in the way the box model worked. I’ve always thought the way IE did it to make much more sense and enable changes to be made without the maths. As it stands now I end up with comments all over my css for complex layouts just to remind me.

    IE was dominant at the time so I guess they thought they could ignore standards for the better.

  • http://jacobdubail.com Jacob

    What’s the current browser support for the box-sizing attribute?

    I think this is a great idea to integrate into the 960 grid, but I’d probably steer clear for a more custom layout. Hacking the 960 grid apart to add borders and padding is a huge pain, as is inner-wrapping every grid_x element on your page with an extra element, just to add borders/padding.

    I’ll have to think about using this one for a while…

  • http://www.arvindandrion.com arvind

    I liked it! nice tip jeff.

  • http://www.zingocan.com Tayfun ÇAKIR

    On the other side I was definitely frustrated sometimes when I had to do these math calculations and when I had to change a width of one column on a multi-layout columns it was painful!
    I think box-sizing is a smart way to get all this done! We should drop what we used to do and stick with this approach. It makes more sense.

  • Dave

    They totally got it right. I always thought their box model made more sense when learning to code.

  • http://www.twitter.com/isJohnny Johnny

    Interesting point to make, I’ve never really thought of it that way. Although I do prefer the standard way.

  • Mauro

    It’s hard to say, but IE this time is definetively right and I think it’s the correct way to manage that.

  • http://www.ronniesan.com RonnieSan

    It seems pretty unanimous that padding should be included in the total width. It makes so much more sense to just change a padding value if you want it different and not have to change the width every time you make an adjustment.

    I think the W3C should make the change.

    • Josh

      Agreed, the border-box model saves time on the calculator.

  • http://twitter.com/ilovecomputers ilovecomputers

    The engineering side of me agrees with IE’s implementation because it sets boundaries for layouts.

    W3C is fixated on content and separating it from any other design elements such as borders and margins. When it comes to laying out your site, this paradigm is not practical because of the tedious calculations.

  • http://saurini.com Rob

    I wish there was a CSS property called border-type [inner | outer | middle] like you can choose in Photoshop. It makes logical sense to me.

  • Markus

    If you think of text then IE’s (old) way of calculating width makes sense. But what about images? If you add (!) a border to a image then the border should be drawn around the image and not inside it, right?

  • http://novatvmedia.com/retropinups Anthony Alexander

    WEB 4.0 is Sooooo AWESOMe

  • http://www.buitenaardig.nl/ Phil

    Wauw, I’ve learned something today! This is really usefull and i’ll surely use it.

  • http://jasonnorriswebdesign.com Jason

    This is awesome. Sure, IE’s implementation doesn’t match the standard, but AFAIK there’s no way to make IE match what other browsers do. With the box-sizing tag, we can make the other browsers act like IE. It’s an easier paradigm for layouts, AND all your browsers work the same way now! I’ll definitely be giving this a try on an upcoming project.
    Thanks!

  • http://coltpini.com Colt Pini

    I just have to add my side of this. IE is wrong. If I specify an image and put 20 px padding around that image, I don’t expect to have that image shrink in size. I expect 20px to be put around the img. If I have a div and I want it 200 px it is the same thing, I don’t expect to have my div shrink in size, but I expect the padding to be put around it.

    I can compare this to life models because that is where a lot of this comes from. If I moving and have a box I fill that box with stuff. If I don’t want my box to touch anything else, I move the box, not make it smaller.

    If I am filling that box with my glasses and plates I don’t shrink my glasses down to put padding I simply put the padding around my glass.

    We are talking about computer programming here. Despite what people may think, css is a computer language, math is envolved. it’s ok. That’s what makes us better than Dreamweaver’s HTML output.

    Lastly, I stand with Andy Clarke (http://www.transcendingcss.com/) Web isn’t print, when I design a print document, everything will be the same no matter what printer I print it one, colors may change and things, but my content is fixed. This is not print, it is web. If my site is different in IE than Firefox, chrome, or safari that is just fine. In fact you may design it that way like Andy Clarke Did.

    p.s. CSS3 has a few great positioning modules that will eliminate float layout!! Counting down the days!
    http://www.w3.org/TR/css3-grid/
    http://www.w3.org/TR/css3-layout/

    • http://www.conceptify.com Joel

      Why not use margin instead of padding then on images?

      • http://coltpini.com Colt Pini

        You wouldn’t put a container around just an image, most likely there is more content around that. The proper place for spacing would then be inside the container. I wouldn’t want to specify 15px margin around every child left and right, and the first child on top and the last child on bottom. I would just use padding on the parent element.

        Padding and margin have their proper places and correct usage, but this very issue, the box model, has skewed the purpose of them so that a lot of people don’t know where and when to use what because we haven’t been able to use them properly.

    • Jim Nech

      Colt,

      Would you want to fill the box you describe with glasses and dishes and then once you have carried it out to put it in your car, find that it has grown larger and now will not fit? I guess you could take out enough stuff to make it fit, carry the extra stuff back inside, go get another smaller box, load it and check to see if it will fit somewhere else in your car or make another trip…

      Jim

  • Joacim Boive

    To get IE<8 to have a fix width the webpage has to be in quirks-mode and that's not a practice that I like to use. I always use standards-mode and then there's no way to get IE<8 to use border-box (I don't consider JavaScript and/or HTC-hacks good practice neither) even if I would like too.

    So, at least to me, this isn't something I could use even if I would like to.

    Regarding who's right I can understand both sides. But I think defaulting to "content-box" but giving us the option to use "box-sizing" to change it to "border-box" is the best of both worlds.

  • http://www.webuddha.com/ David H

    Hell yes MS IE has had it right from the beginning. Only IE handles padding and borders correctly – in all other browsers the model for adding padding and border size to a fixed width is completely idiotic, not to mention how useless margin becomes when padding and margin differ only in their relationship to a border – which is used on a small percent of page layers.

    It’s easy to complain when debugging IE against other browsers, but remember that IE was forged into the market when standards were still in their infancy. While most advancements in the “standard” browser model have proven well founded, the use of padding and borders is one example of how useless a logic can become when implemented poorly.

  • http://jethrolarson.github.com Jethro Larson

    Border-box is much more useful and intuitive. I remember back when I was learning CSS figuring out that the STANDARD was the arbitrarily dumb way.

    Just think of it this way:
    Draw a box on a piece of paper and write some text in it. Now ask anyone to tell you how big the box is. Do they measure the width of the text or the outside of the border?

    W3C got this waaaay wrong.

  • wison

    not availiable in ie6.
    in my custom , some of them use ie6 either.
    but above the box-sizing:border-box can been use.
    how to solove it?

  • wison

    add..i’m new.

  • Ernest Jumbe

    It all goes wrong when you realize that you need to be in quirks mode. It a good idea and it makes so much more sense. Unfortunately IE6 and 7 went standard unless there’s something I’m missing there’s no way of getting them to behave in the old way. Style the content and forget about it. It was too good to be true.

  • http://coltpini.com Colt Pini

    I wanted to bring this to this discussion.

    http://www.w3.org/TR/css3-ui/#box-sizing

    This css module, particularly this section, allows for the functionality of specifing two values, “content-box” and “border-box”

    this difference between the two is that when you set a width on a “content-box” the width applies to the content, not the border or padding.

    the “border-box” sets the width with the border and padding included.

    So here is the solution, so far it looks like it is supported by IE and Opera but not FF as of 3.6.6 and Chrome as of 5.

    • http://visuex.com Michael Tunnell

      You are right…it seems that IE and Opera are the only browsers that currently support box-sizing so this discussion is sadly now irrelevant.

      Browsers tested to not work with box-sizing: Firefox 3.6.6, Chrome 5, Safari 5, Epiphany (Linux)

      I despise IE in almost every way but it found a way where I agree with it. (I refer to the browser itself rather than Microsoft as it saddens me to think that people could be so absent-minded to make such an awful program.)

      Box-Sizing: should be the standard simply to make our work as designers/developers easier. Whether you agree or disagree about what should have the settings applied to it with content or the box you have to admit that box-sizing definitely makes the process easier by eliminating the arbitrary calculations.

      Either way is correct because both types have their upsides and downsides so it is impossible for everyone to come to a unified conclusion but when it comes to programming I feel that the more simple it is, the more easy it is and the more easy it is, the better.

      • http://coltpini.com Colt Pini

        Well, It isn’t irrelevant. Because IE is the only one that is different, and also supports the box-sizing property you can use that in IE to make it behave like the other browsers, thus no padding cross browser issues. box-sizing: content-box; is great, it doesn’t matter that chrome/ff/ect. doesn’t support it what matters is that we can make IE conform. This is included in my reset style sheet for sure!

  • http://www.arvag.net GaVrA

    Just had an amazing problem with caption element who had two floated child elements. All in all those three lines helped me a lot! :)

    Thanks big time Jeff!

  • Seth

    As a designer, you have to work with client/manager feedback. When you set the width of a box with, say, a 5 pixel border, and the client says, I want a thinner border, it’s nice to be able to reduce the size of the border without having to recalculate the size of the box. I agree, computers should do the calculating. IE got this one right. This little fix has helped standardize the box model and make things so much easier.

  • http://yongbakos.com Yong

    Fuck yes, I can’t believe the standard went the other way.

← Older Comments
Newer Comments →