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.
--
Alan Gresley
http://css-3d.org/
http://css-class.com/
______________________________________________________________________
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/
