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/
