Workaround for Mozilla/Firefox float bug?
Posted: Fri Jul 16, 2004 2:44 pm
Alright, Mozilla and Firefox both have broken CSS "float" support. Don't believe me? Load up this page in Firefox-0.9.2 or Mozilla-1.7:
A real-world example can also be seen here. Note that Internet Explorer renders both examples according to the standard.
Does anyone know a workaround for this bug? I don't want to resort to using tables.
[edit]Wow, noticed another bug in Mozilla/Firefox... The floating div in my example doesn't stretch or clip the text, even though the text is too big for the frame. Strike two for Firefox.[/edit]
Code: Select all
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Mozilla Float Test</title>
</head>
<body>
<div style="background-color: rgb(192, 192, 192);">
<div style="float: right; height: 10em; width: 5em; background-color:
rgb(255, 255, 255); border: solid 1px rgb(0, 0, 0);">This is a floating div.
It's height should stretch its parent's height.
It's not supposed to be completely independent of its parent.</div>
This is a div. It should stretch in height according to the height of its children.</div>
</body>
</html>
Does anyone know a workaround for this bug? I don't want to resort to using tables.
[edit]Wow, noticed another bug in Mozilla/Firefox... The floating div in my example doesn't stretch or clip the text, even though the text is too big for the frame. Strike two for Firefox.[/edit]