width:100% + padding/margin question

[Historical Forums User]

If I have:

Code:

and I do:

Code:

#box1 { width:500px; }
#box2 { width:100%; padding:10px; }

The 10px padding of #box2 will be allocated outside of #box1. According to the box model, this is the correct behavior (except for buggy IE6). But that is not what I want, I want the padding for #box2 remain inside #box1 and keeping the width in %.

How can I do that?

Thanks.

[chazzwick]

Why do you want to keep the width of box2 in % when its fixed at 500px because of box1?

If you want 10px padding inside box1, just have:

Code:

#box1 { width:500px;}
#box2 { padding:10px;}

[LadynRed]

If you don’t give box2 a fixed width, it’s going to fill the available space of it’s parent by default ;)

[Historical Forums User]

Sorry but I forgot to mention the #box2 is floated.

[Historical Forums User]

Because #box2 contains floating elements, and in order to wrap those elements, I need to float #box2 and also #box1…

I don’t have any example on hand right now, =(

[Author]

Posts