Padding applied to #wrapper

Newbie question here. I have a #wrapper as my main container. Like so:

#wrapper {
  margin: 0 auto;
  padding: 0 20px;
  width: 960px;
  height: 100px;
}

My question is: what is the actual width of the wrapper now? 960px or 1000px? Let's say I want to have a #header inside t开发者_StackOverflow社区he #wrapper. What should the width of my #header be, assuming I want it to be the width of the #wrapper?

The width of the wrapper in your example is now 1000px. Padding is added to the width, wheras Margin is not.

If you put a header inside the wrapper, you would want it to be 1000px to stretch entirely from side to side, but that would be impossible because of the padding, so your header would still have to be 960px.

Heres a JSFiddle (Sorry, just discovered this today!)

http://jsfiddle.net/wGYfR/8/

The outer width is 1000px and the inner width is 960px. So if you want to put inside the wrapper it should have width <= 960px

The wrapper is still 960px. However, you have added padding of 20px on both sides meaning for 20px on both sides there will be only white space. The usable area is now 920px.

You don't have to set the width of the header. If you don't it will fill the whole wrapper element (minus the padding). You header will end up being 920px.

I suggest firebug This will help you so much. Seriously.

The actual width would still be 1000px. You can set a background color on your #wrapper to see that the width will still be 1000px.

CSS Box Model Illustration http://img405.imageshack.us/img405/3402/boxmodel.png

If you use Chrome or Safari (or firebug with Firefox for that matter) you can easily check out the width of an element, and how padding and margin in affecting it.

The width should be 960px, however only FireFox adds the padding to the width. To fix this, put the following code on top (or at least above all div selectors) of your code:

DIV {   /*let Firefox stick to the web standard concerning padding*/
    -moz-box-sizing:border-box;
    box-sizing:border-box;
    margin:0;
    padding:0;
}