Re: Horizontal rules

--- Allan Odgaard <Duff@DIKU.DK> wrote:
> On 20-Feb-00, Matthew Brealey wrote:
> 
> [ horizontal rulers that respect floats ]
> > It isn't necessary. Floating the element will do this (effectively
> make
> > the margin such as to be next to the float) anyway. This has the
> effect of
> 
> But how should I supply this float with the proper width? Unless given
> by the
> user (in pixels) then the width is normally a percentage of the
> available
> horizontal space, though using the containing box to calculate this
> (which is
> the rule for a percentage width) won't respect the other floats.

No it won't; but because you have set the width of the float that the
horizontal rule is next to, and should have done so in %, the width of the
horizontal rule can be deduced.

E.g., say you want the horizontal rule to be next to a right float.

Say .rightfloat {float: right; width: 30%; padding: 2%}

The horizontal rule is then simply {float: left or right; width: 66%}.

This uses the fact that 99.99% of the time the elements will have the same
containing block or containing blocks of equal widths.

It is possible to contrive a situation where this is not so:

<div class=rightfloatholder {width: 110%}>
<div class=rightfloat {width: 50%; float: left}>
</div>
<div class=hrholder {width: 80%}>
<hr class=float {float: right; width: set to a value}>
</div>
, but even here you can see that the HR should be set to a width of
68.75%.

> > disrupting the flow, but by putting clear on the next element, the
> element
> > is effectively in the normal flow - the result is precisely the same
> as
> > setting the margin to that of the float.
> 
> huh? By setting 'clear' for the next element I will flush all floats,
Not at all. If you set clear: both you will do this, but in the example
above clear: left only affects the left-floated HR.

Actually it is not necessary to set clear, provided, if the element is not
as wide as the available space, that you set the margin to fill up the
available space so that subsequent floats are effectively cleared anyway
(because if a float would overflow the containing block if it floats next
to another float, it is moved down below the float).

I got a little confused here, because I was thinking of non-floated
elements, which would need clear to fix border/background problems (e.g.:
<p style="float: left; width: any; margin-top: 100px">
<p style="float: none; width: auto; border: solid">
, which I initially thought would result in 
+----------+ - border of non-floated element
|          |
+--------+ |
|        | |
| Float  | | 
|        | |
+--------+ |
|          |
+----------+
, but of course if there was a right float to the right, the result would
be:
+-----------------------------+
|                             |
+--------+      +-----------+ |
|        |      |           | | 
| Float  |      |Right float| |
|        |      |           | |
+--------+      +------------ |
|                             |
+-----------------------------+
where the enclosing rectangle represents the border of floated element;
this diagram assumes the right float also has a 100 pixel top margin and a
right margin.

So it is actually necessary to float ALL elements that you want to be next
to the right float; and not, provided you've set margins on the floats,
clear them.

Note finally that it is not possible to simply enclose all the elements
(that you want floating next to the right float) in one DIV because this
could result in too much content being floated - you cannot know how much
content is needed to pass the bottom of the right float; so you must float
them all individually.


=====
----------------------------------------------------------
From Matthew Brealey (http://members.tripod.co.uk/lawnet (for law)or http://members.tripod.co.uk/lawnet/WEBFRAME.HTM (for CSS))
__________________________________________________
Do You Yahoo!?
Talk to your friends online with Yahoo! Messenger.
http://im.yahoo.com

Received on Tuesday, 22 February 2000 13:29:33 UTC