box model

[amiw]

If this is my container

div#AdsContainer
{
border:solid 2px #8DA6CE;
background:#EEF3FB;
width:160px;
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
}

and I want to have a box within the container then is the code below correct? ie with the width set to 152px?

.Ads1
{
border:solid 1px #8DA6CE;
background:#EEF3FB;
width:152px;
margin: 2px 2px 2px 2px;
padding: 1px 1px 1px 1px;
}

 

[Vragabond]

Yup, this should work. 152px + 2 * 2px margin + 2 * 1px border + 2 * 1px padding = 160px. Incidentally, if all padding and margin is the same, you can simply say [tt]margin: 2px; padding: 1px;[/tt]. Wouldn't this be easier if you just tested it out yourself?

 

[amiw]

just wanted to make sure that the cotent holder was the maximum amount for everything that it contained.
If the box inside box is too big it'll just expand the outer box..

thanks

 

[Vragabond]

Not in standards-compliant browsers. In IE, you are correct, this will happen because IE treats width (and height) as min-width, min-height. However, all other browsers, when presented with a bigger box contained in a smaller box will simply render the inner box hanging over the outer box. Also, make sure you have a complete and valid doctype or IE will use quirks mode which makes it use incorrect box model.