Member Avatar for headedtomexico

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?

  • 3 Contributors
  • 2 Replies
  • 116 Views
  • 5 Days Discussion Span
  • Latest Post Latest Post by MidiMagic
Member Avatar for omniuni

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.

Member Avatar for MidiMagic

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.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.