Forum Moderators: not2easy
this has caused me no end of anguish over the past couple of years, so i'm going to make a real effort to get it sorted out now.
consider the following code:
<style>
div#A
{
width:100%;
padding:50px;
border:solid 1px green;
}
div#B
{
border:solid 1px red;
width:100%;
}
</style>
<div id=A>
<div id=B>
HOW WIDE AM I?
</div>
</div>
now, A asks for a content width of 100%, and with its padding, that makes an outer width of 100%+100px, so it overflows the viewport horizontally. fine.
but what i wanted, of course, was that the outer DIV supplies padding away from the edge of the page, and the inner DIV, asking for 100% width, then gets 100% of the viewport, minus 100px for the padding.
this can be easily done, i just take out the width:100% line from A, and i get what i want. in fact, in that case, i can nest another A around the existing A, and get another 50px padding each side. great. well behaved.
i am pretty sure that the default width setting of a DIV is auto (though i can't find this in either the CSS or HTML standard), so question 1 - is that true?
question 2, and this is the tricky one. how do i do the same thing in the vertical direction? i can't set the height of A to 100% because that will set the content height to 100%, not the outer height. neither can i set it to auto, because auto height-wise means 'as little as required to fit the content', doesn't it? in any case, neither of these work.
i've torn too much hair out already over this one to be angry with myself/machine/software anymore, but i'd love to have an answer.
cheers all.
Question 2: Consider setting the outter most padding for <body> instead. <body> should be at least 100% of the viewport's height, I couldn't think of any situation where it isn't at the moment.
Hope these help.
<div style='padding:50px'>HOW BIG AM I?</div>
doesn't overflow the viewport horizontally? it should, shouldn't it?
as to the body padding, it doesn't help, because there are other items on the page that need to be positioned within the padding.
in any case, i'd like to identify the general answer to what's going on here, rather than a specific fix, because i encounter variations on this issue often.
cheers
So <div style="padding:50px">blahblah</div> is still gonna take up as wide as its outter element's width, minus 50px all-around for its padding. So it won't overflow the viewport, unless, the parent element is narrower than (100px + width of "blahblah"). Then by CSS standard this current div should overflow to show its content. IE currently doesn't follow the standard, and will expand its parent's width so this div will fit.
so is a DIV width and height auto by default, and they just behave differently (width expands to fill parent, height shrinks where possible)? or if not, what are their default values?
in any case, is there a way to get that expand-to-fill behaviour in height? i understand that this may not be supported because it's a bit anti-HTML-spirited to do this sort of thing. but my app is private use so i can do what i like :)
cheers
