I've poked around on google and haven't been able to find the answer, and I've poked around with min-width to try and solve the problem but had no luck.

I have a div, well say 500px with internal padding of 10px.

Inside of it I put a table who's width is 100%. In FF/Chrome it will make the table 480px. I'n IE it makes it 500px, which then ends up expanding the containing div to 520px. I want it to behave the way it does in firefox/chrome. I can't use static values as not ALL of the divs are 500px. Their width is inherited from another container. When they expand in IE it throws everything off and makes things overlap. Any ideas?

8 Years
Discussion Span
Last Post by MidiMagic

The problem is IE's box model. You can use an alternate stylesheet to deliver to IE "width: auto;", but a better solution is to wrap the DIV. Remove padding and instead, create an inner DIV with margins. This will work between browsers.


Never put size styles (width, height) and surround styles (margin, border, padding) in the same style or on the same web page tag.

Instead, nest two box objects. Put the size styles on one box object, and the surrounding styles on the other box object. This gets around the IE box object model error.

The IE box object model puts the surrounding styles INSIDE the size styles.

The W3C and Firefox box object model puts the surrounding styles OUTSIDE the size styles.

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.