Preventing padding propety from changing width or height in CSS?

Question

So, I am creating a site with DIV's. Everythings working out except when I create a DIV, in my css file I create them like this (example):

newdiv { width: 200px; height: 60px; padding-left: 20px; text-align: left; }

NOW, when I add the padding-left property, the width of the DIV changes to 220px, and I want it to remain at 200px;

Let's say I create another DIV named anotherdiv exactly the same as newdiv, and put it inside of newdiv but newdiv has no padding and anotherdiv has padding-left: 20px. I get the same thing, newdiv's width will be 220px;

How can I fix this problem?

Answer 1

Put a div in your newdiv with width: auto; and margin-left: 20px;

Remove the padding from newdiv.

The W3 Box model page has good info.

Answer 2

This is the famous Internet Explorer box model bug where IE will wrongly add the padding on to the dimensions of an element with a fixed size.

There are many work-arounds (most notably the box-model hack), but (mostly for the sake of not using 'hacks') I usually end up avoiding padding on any element that has a fixed size and applying margin to a child element instead.

Answer 3

when I add the padding-left property, the width of the DIV changes to 220px

Yes, that is exactly according to the standards. That's how it's supposed to work.

Let's say I create another DIV named anotherdiv exactly the same as newdiv, and put it inside of newdiv but newdiv has no padding and anotherdiv has padding-left: 20px. I get the same thing, newdiv's width will be 220px;

No, newdiv will remain 200px wide.