On Tue, Oct 18, 2011 at 7:46 PM, Alan Gresley <a...@css-class.com> wrote: > On 18/10/2011 9:14 PM, Ghodmode wrote: >> >> On Mon, Oct 17, 2011 at 4:08 PM, Philippe Wittenbergh<e...@l-c-n.com> >> wrote: >>> >>> On Oct 17, 2011, at 4:40 PM, Ghodmode wrote: >>> >>>> I have a problem where a DIV is behind a floating element. Given the >>>> following code, the DIV.banner appears behind the DIV.logo_block at >>>> the left edge of the page. >>>> >>>> I've discovered that setting overflow:auto on div.banner fixes the >>>> problem, but I don't know why. Can someone help me to understand why >>>> this is happening? >>> >>> 'new block formatting contexts' >>> http://www.w3.org/TR/CSS21/visuren.html#block-formatting >> >> That didn't do me any good. It doesn't say anything related to the >> scenario I've described and doesn't help me understand it. >> >> It does have a link to an explanation of the visual formatting model, >> though. It states the following: >> >> > The border box of a table, a block-level replaced element, or an >> > element in the normal flow that establishes a new block >> > formatting context (such as an element with 'overflow' other >> > than 'visible') must not overlap the margin box of any floats in >> > the same block formatting context as the element itself. If >> > necessary, implementations should clear the said element by >> > placing it below any preceding floats, but may place it adjacent >> > to such floats if there is sufficient space. They may even make >> > the border box of said element narrower than defined by section >> > 10.3.3. CSS2 does not define when a UA may put said element next >> > to the float or by how much said element may become narrower. >> >> To me, this sounds like the edge of the DIV.banner must not overlap >> the edge of the DIV.logo_block, even though that seems to be exactly >> what's happening. But, like I said, there's something I don't >> understand. >> >> A DIV is "an element in the normal flow that establishes a new block >> formatting context" and its default overflow value is 'visible', >> right? So the preceding floated element should be cleared and the >> DIV.banner should be placed adjacent to it because there is sufficient >> space. >> >> So, what do I have wrong? >> >> Thank you. > > > Did you read this. > > | In a block formatting context, each box's left > | outer edge touches the left edge of the containing > | block (for right-to-left formatting, right edges > | touch). This is true even in the presence of floats > | (although a box's line boxes may shrink due to the > | floats), unless the box establishes a new block > | formatting context (in which case the box itself > | may become narrower due to the floats). > > So in your code, the div.banner_placeholder left edge is touching the left > edge of the 'initial containing block' so applying overflow: auto makes the > later part happen. > > | unless the box establishes a new block formatting > | context (in which case the box itself may become > | narrower due to the floats). > > More precisely, a box with a 'block formatting context' can not flow > underneath a float but rather it sits beside it.
I think I get it now. The part that I had wrong is that I thought a DIV started a new block formatting context by default. That's apparently not true and overflow:auto makes it establish a new formatting context. Thank you. > -- > Alan Gresley > http://css-3d.org/ > http://css-class.com/ > -- Ghodmode http://www.ghodmode.com/blog ______________________________________________________________________ css-discuss [css-d@lists.css-discuss.org] 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/
