Re: [CSS2.1-9.5] [CSS2.1-9.4.1] Block formatting context and Floats

On Wed, Jan 21, 2009 at 3:40 PM, Anton Prowse <prowse@moonhenge.net> wrote:
>
> Tab Atkins Jr. wrote:
>> I happened to discover the issue outlined above
>> during a recent site design, where the ability to force the block
>> width to shrink so that its left edge moves away from a left float was
>> very useful.
>
> Would you be prepared to point us the example for this? I would love to know
> how people are finding this behaviour useful.[2]

Certainly.  http://igofigure.com/page/store-igo-figure-software/ is
the page that I was working on at the time.  (Now you know where I
work.)  (Also, view this in a decent browser - I haven't given IE7 any
love yet, and it *really* needs it for this layout.)  (Also, this is
currently a non-functional mockup page, so don't play with it too
much.)

There are three separate effects caused by making the containing <div>
a BFC, and all of them were useful to me.  First, it prevents the
<h1>s margin from collapsing upward and affecting the floated block.
Second, it prevents the descriptive text from wrapping around the
bottom of the floated block.  Finally, it makes the "Email Sales"
button not behave insanely, because its containing block's left edge
is actually nearby rather than drifting somewhere behind the float.
Try removing the "overflow: hidden" on the #main-bar block and see
what it gets you.  A fourth effect that isn't present in this example
but may be significant later is with lists - without overflow:hidden
their left margin/padding is effectively ignored, so their markers can
overlap the contents of the floated block.

I've previously been able to work around this (and I'll have to in an
IE7-specific stylesheet in order to make it behave halfway decently)
by just setting the floated block's width explicitly so the
non-floated block can set enough padding to pull its content edge
approximately where I expect it to be.  If the floated block is just a
picture, I've also gotten away with just making it a background image
on the containing block (and again setting sufficient padding on the
'normal' block to keep the content away from the image).  However,
these pages will be dynamically generated from data in our webstore,
and I can't rely on, frex, pictures being sufficiently narrow, or
lists being avoided in the product description.

The most common workaround, just floating both blocks, won't work here
because this is a flexible-width site, and I'd need to manually
specify the width of the main block to get it to float correctly.

~TJ

Received on Thursday, 22 January 2009 13:58:14 UTC