Forums

5h4rk

If I have:

<div id=\"box1\">
   <div id=\"box2\">
   </div>
</div>

and I do:

#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:

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

daGUY

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

So if you change the width of box1 in the future, box2 will automatically expand to fill it completely.

LadynRed

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

5h4rk

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

box

Why are you floating box2? Post a link to your site or a representation of what you're looking to achieve.

5h4rk

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, =(

treehouse : what would you like to learn today?

Forums

width:100% + padding/margin question