Float overflowing behavior

[Please excuse this post if it has been discussed to death in the past. I've
searched through just about everything I can think of, and had a quick look
through the CSS 3 drafts - but could find nothing similar to this.]


CSS2 specifies (at <http://www.w3.org/TR/REC-CSS2/visudet.html#q17>) that when
using height:auto on a block level element, its calculated height does not take
into account any floating children. Although this behavior can be useful, it can
often be useful to reverse this behavior. With current CSS implementations, this
is possible using a bit of a hack that I've seen crop up once or twice:

  <div style="background-color: red;">
    <div style="float: left; width: 50px; height: 100px;">&nbsp;</div>
    <div style="clear: both;">&nbsp;</div>
  </div>

Without the clearing div, the parent element (the one with the red background)
basically disappears, becoming 0px high. Would it not make sense to remove
the need for a clearing element, instead having something like a
"float-overflow" property? Its CSS definition might look something like:

  Name: float-overflow
  Value: contain | visible
  Initial: visible
  Applies to: block-level, non-replaced elements
  Inherited: no
  Media: visual

When this was set the contain, the element it was applied to *would* take floats
into account when calculating height:auto on block-level elements.

This is another one of my CSS ideas that there's probably a big gaping hole in,
but other people I have discussed this with believe it could be extremely
useful.

Cheers
-- 
Tom Gilder
http://tom.me.uk/

Received on Friday, 9 August 2002 22:10:14 UTC