W3C home > Mailing lists > Public > www-amaya@w3.org > July to September 2003

Bug Report: "Float" with "Clear" attribute doesn't work when it

From: Stan Harrison <scrivener@postmark.net>
Date: Tue, 8 Jul 2003 19:44:24 -0400 (EDT)
To: "Amaya Mailing List" <www-amaya@w3.org>
Message-Id: <20030708234424.676E820A405@mail.postmark.net>

follows directly after a floated block level element.
Date: Tue, 08 Jul 2003 23:44:24 +0000
Content-Type: text/plain; charset="iso-8859-1"

This bug applies to both Version 8.0 and 8.1 operating on Windows ME.

These are the first Amaya builds to handle the CSS float attribute,
but they still cannot render the float attribute correctly when the
second of two or more block level elements in succession receive, for
example, a float "right" declaration + a clear "right" declaration.

Here's what I've done. I've created multiple divisions that I want to
float right and cling to the right-hand margin. The first division
receives a simple float right declaration. The second division
receives a float right, clear right declaration. This should cause the
second division to "avoid" the first, and align itself directly below
the first and directly against the right-hand margin.

Here's a sample webpage you can bring up to see what I'm talking
about: http://helios.acomp.usf.edu/~sharriso/supply-closet/index.html

The "Harrison Center" division received the float-right declaration.
The "Operating System" division received both a float-right and
clear-right declaration. But the "Operating System" division fails to
clear the "Harrison Center" division.

Here's the truncated page code, followed by the CSS declarations.

<div class="hc">
<h1>Harrison Center</h1>
...snip...
</div>
<div class="sb">
<p>Bookshelves</p>
<ul>
<li>snip</li>
</ul>
</div>

Here are the CSS declarations:

div.hc
{float: right;
margin: 0 0 20px 20px;
padding: 0 0 1em 0;
width: 300px;
white-space: nowrap;
}

div.sb
{clear: right;
float: right;
width: 240px;
margin: 0px 0px 50px 20px;
padding: 1em 0 1em 1em;
background-image: url(../images/css/yellow-lines.png);
border-top: medium outset #336699;
border-bottom: medium outset #336699;
border-left: medium outset #336699;
}

Hope this helps.

I love Amaya, and I'll love it even more when float and clear work in
concert.

Thanks for all the work you've done.

---
Stan Harrison
scrivener@postmark.net
Received on Tuesday, 8 July 2003 19:44:46 UTC

This archive was generated by hypermail 2.3.1 : Tuesday, 1 April 2014 11:01:40 UTC