FLOATING ELEMENTS

Consider the following:

p.left { float: left; width: 30% }
p.middle { float: left; width: 30% }
p.right {  width: 30% }

<p class="left"> This is paragraph 1 which should be floated left</p>
<p class="middle"> This is paragraph 2 which should also be floated left</p>
<p class="right"> This is paragraph 3 which will not be floated anywhere</p>

How would the CSS rules for floating elements require this to be rendered?
What I would expect to see is a three-column-like arrangement as follows (I
hope this formats properly in the e-mail):

This is paragraph   This is paragraph 2    This is paragraph
1 which should       which should also     3 which will not be
be floated left         be floated left            floated anywhere

Paragraph 1 floats to the left margin. Paragraph 2 attempts to float to the
left margin, but cannot as it butts up against paragraph 1. Therefore it
occupies the middle "column". Paragraph 3 then takes the reminder of the
window.

When I tried this in IE4, it worked! (I was amazed). It also looks fine in
non-CSS supporting browsers. However, it makes a hideous mess in Navigator 4
and Opera 3.50.


What is the correct behaviour in this situation? It isn't directly covered
in the CSS1 specs. Does this mean that the interpretation is left to the
user agent, or are there rules that cover this situation?



--
David Meadows [ Technical Writer | Information Developer ]
DNRC Minister for Littorasy * david@heroes.force9.co.uk

"I promise to question everything my leaders tell me.
I promise to use my critical faculties.
I promise to develop my independence of thought.
I promise to educate myself so I can make my own judgements"
          -- Carl Sagan

Received on Saturday, 19 June 1999 05:32:15 UTC