CODEWITHSUNDEEP
internet-explorer-6css
menardmam
menardmam

Reputation: 9986

IE6 and box model with padding

I have a box that is width:600px i like to have text left, with padding of 20px that box is flot with another at it side (sidebar/content) in other browser it play fine, content-sidebar with define

in ie6 it see the content to be 600 + 20, witch push the sidebat to the bottom...

How do you use padding, that work in all the browser including ie6

thanks in advance

Upvotes: 0

Views: 283

Answers (2)

kuyabiye
kuyabiye

Reputation: 709

if you are free to use hacks, use underscore hack.

_width: 560px; // targets ie6 only

otherwise

add a wrapper div and add padding to that div

<div style="width: 600px">
  <div style="padding: 0 20px">
     bla bla
  </div>
</div>

Upvotes: 1

Ben
Ben

Reputation: 26

IE will see the box as 560px + 20px left padding + 20px right padding to equal 600, rather than 600px + 20px left padding + 20px right padding (as browsers should see it). The default behaviour of the box model is to take the width of the box and then add padding and margins to it.

The best way to target IE6 is to use a conditional comment (http://css-tricks.com/how-to-create-an-ie-only-stylesheet/), and then in that stylesheet set the box as width:560px. I'm assuming you don’t have margins but if you do you need to subtract those from the overall width, too.

Upvotes: 0

Related Questions