I’m following Dan Jasker’s Inline Box Model screen cast. Something I don’t understand is why some of the container items would have an overflow of hidden. Surely this hides any overflow of the items inserted within it?
Basically can anyone tell me when and why I would use an overflow of hidden when using the box model format?
THANKS
Mark
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Overflow:hidden is a trick to force the container box to “clear” any floated children. Normally, if you have an inline child element in an HTML box, and you’ve set that HTML box to collapse height (which you would for a menu), then the HTML box would collapse to 0 height, because the floated child elements within it aren’t considered in its variable height calculation. Setting overflow to hidden (other values also work, but hidden is the most reliable cross-browser) counter-intuitively causes the browser to wake up and say, “Hey, this element needs to be laid out, better check its children for height”. This causes the outer box to “clear” the inner boxes, and you get what you expect – not boxes sticking out of the bottom of a 0-height parent.
Walter
On Nov 24, 2011, at 9:46 AM, Mark wrote:
I’m following Dan Jasker’s Inline Box Model screen cast. Something I don’t understand is why some of the container items would have an overflow of hidden. Surely this hides any overflow of the items inserted within it?
Basically can anyone tell me when and why I would use an overflow of hidden when using the box model format?
THANKS
Mark
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Hi Walter
So do I set overflow to hidden for ALL items that contain an item. With only the child item having an overflow of visible?
Thanks
Mark
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
You set it for any element that has a child with Float set. So this only applies to inline layout construction, as Float isn’t available for any absolutely positioned elements.
Also, it’s not strictly required, it just makes your layout make more sense visually if you have applied a background color or border to that parent element, for example. If you don’t set it, the layout will still work structurally, and if there’s no color or border applied to the parent, you won’t see that it’s collapsed up to 0 height.
Walter
On Nov 25, 2011, at 7:06 AM, Mark wrote:
So do I set overflow to hidden for ALL items that contain an item. With only the child item having an overflow of visible?
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Thanks for clearing that up.
Just got one question, if I may:
In an inline layout, if there is a child item with Float, the parent item should have Overflow Hidden. Does the grandparent item also have to have Overflow Hidden?
Thanks, Mark
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Only if the parent item (the direct child of the grandparent) is floated also. There are several ways to clear a float, and as long as you use one of them, then any floated direct children will clear (meaning, in this context, that the floated children will not stick out of the bottom of their parent).
Walter
On Nov 28, 2011, at 5:04 AM, Mark wrote:
In an inline layout, if there is a child item with Float, the parent item should have Overflow Hidden. Does the grandparent item also have to have Overflow Hidden?
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Ok. Thanks
Mark
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options