Oh, sorry, I forgot to mention that #box2 is floated, thus it does not
occupy the whole width of #box1. Without setting #box2 to width:100%,
I believe that its width relies on how long the content is. Correct me
if I'm wrong.
Thanks
On 22/08/2008, at 6:00 PM, Bill Brown wrote:
> Chang Huang wrote:
>> <div id="box1">
>> <div id="box2">
>> </div>
>> </div>
>> #box1 { width:500px; height:200px; }
>> #box2 { width:100%; height: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?
>
> Assuming your code is exactly what you're using on a site somewhere,
> the
> setting of 100% width on #box2 is superfluous. A div is a block level
> element, so #box2 would automatically fill the 500px width of #box1.
> Setting horizontal padding on a block level element without setting
> the
> width essentially gives you the 100%-10px-10px that you want;
>
> That takes care of the width issue. Height is a little tricker. Since
> adding 10px to the padding of #box2 would make its height
> 100%+10px+10px, you have to fake it by setting a 10px vertical
> margin on
> child elements and preventing collapsing margins with overflow:auto
> (assuming you'd want overflow:auto for a fixed height box anyway).
>
> So, if this is your HTML:
> <div id="box1">
> <div id="box2">
> <p>Content</p>
> </div>
> </div>
>
> This CSS should approximate what you're looking for:
> #box1 { width:500px; height:200px; background:#f00; }
> #box2 { height:100%; padding:0 10px; background:#ff0; overflow:auto; }
> #box2 p { background:#fff; margin:10px 0; }
> The colors are there for testing, of course.
>
> In an overflow situation, collapsing margins will prevent any bottom
> margining (faux padding) to appear on the last element contained with
> #box2. I've never found a decent workaround for this, but the code
> above
> will give you three sides at least.
>
> Hope it helps.
> --Bill
>
>
> --
> ~
> ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
> TheHolierGrail.com | MacNimble.com | Cyber-Sandbox.com | Anytowne.com
> Bill Brown, Web Developer - "From dot concept to dot com since 1999"
> "The intuitive mind is a sacred gift and the rational mind is a
> faithful servant. We have created a society that honors the servant
> and
> has forgotten the gift. -- Albert Einstein
> ~
> ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
