Why Does Adding Padding to a div Mean It Exceeds Its Fixed Width?

HTML & CSS
1

Hi Guys

See:

http://www.highlycreative.co.uk/test/css-layouts/test11.htm

I added:

padding: 5px;

To the green header div, and now you can see that it exceeds its fixed width designation of 960px. Surely padding shouldn’t push out the fixed width? What is the correct way to pad instead?

Thanks

2

padding and margin are added to the overall width. To avoid having to change with width setting every time you adjust padding/margin, it’s easier to have an inner div on which you place the padding/margin. You just don’t set a width on that inner div, in which case it just absorbs the padding/margin.

Really, though, in a situation like the one on that page, it never looks very good (to me, at lest) to have a background color on that content div. So it’s a problem you can do without. (And I presume pink on green is for testing porpoises only? Surely? …) :slight_smile:

3

Thanks … and yes the colours are just for testing purposes.

4

Or you can use css3 box-sizing: border-box;. The width then will not exceed what you stated