Posted by Jonathan N. Little on 06/14/06 22:09

Ed Mulroy wrote:
> Here is a problem with using CSS that continually bites me. Do you know how
> to defend against this?
>
> If in the HTML I move the menu list down to below the stuff on the right
> then the menu stays on the left but moves down below the bottom of the stuff
> on the right (IE6) and below all but the last two lines of the stuff on the
> right (Firefox).

Please stop top posting! On some of the messages where I want to refer
to more that just your immediate message it requires considerable
editing to keep the quotes in line with the authors. It is NOT fun any
more and it is probably why other regulars have not offered to help you.
And while we are at annoyances, in case you do not know what a proper
signature is, precede them with:

[hyphen][hyphen][space][carriage return]

Any decent newsreader will automatically snip your name and anything
else that follows, wise cracks, mottos, rants and websites like my
signature...

Now to your question:

The order of the markup (the HTML part) 'may be|usually is' important
with regards to floats.

<div style="float: right">Moe</div>
<div>Larry</div>

even though Moe comes first in the markup the float makes it go to the
the right of Larry and will be aligned at the top with Larry because the
float pulls it out of the rendering flow before Larry.

+-------+ +-----+
| Larry | | Moe |
+-------+ +-----+


But if I put Moe after in the markup

<div>Larry</div>
<div style="float: right">Moe</div>
+-------+
| Larry |
+-------+ +-----+
| Moe |
+-----+
Moe will still be to the right of Larry but because Moe's markup came
after Larry, Larry is render normally and Moe float to the right but it
top will be lower and not aligned

>
> On a whim I tried 'clear: none;' statements but they had no effect.

Applied to which element? You need to reference the spec, I keep a local
copy and reference the Property index often

http://www.w3.org/TR/CSS21/propidx.html

Unfortunately there are no decent books I have found to recommend, but
Googling 'float tutorial' might help. In all honesty 'floats' are
probably the most difficult properties to master and a bit obtuse in its
behavior. Not always intuitive and rough on beginners and the experienced.

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

[Back to original message]