Forum Moderators: not2easy
I'm a long-time web developer, but admittedly not very CSS savvy.
In working on a problem, I found something very odd in Firefox (confirmed in 1.5, 2 and 3). I've looked around but not been able to find the same posting, nor any explanation for if I'm doing something wrong.
The problem is in using floating divs. I get different behaviors in FF if use inline styles vs using a stylesheet. Here is a testcase showing both of them. The first one exhibits the behavior I'd expect. The second one is just 'odd.'
For the life of me I can't figure out what I could be doing wrong, but I wanted to check with some experts.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html><head><title>layout problems</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<style>
.widget {
float:left;
}
</style>
</head>
<body bgcolor="white">
<table style="border:1px solid grey" width="100%"><tr><td>
<div style="background-color:lightblue" class="widget">
<table border='1'><tr><td>
zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz
</td></tr></table>
</div>
<div style="background-color:lightgreen" class="widget">
<table border='1'><tr><td>
yyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy
</td></tr></table>
</div>
</td></tr></table>
<hr>
<table style="border:1px solid grey" width="100%"><tr><td>
<div style="background-color:lightblue" style="float:left;">
<table border='1'><tr><td>
zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz
</td></tr></table>
</div>
<div style="background-color:lightgreen" style="float:left;">
<table border='1'><tr><td>
yyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy
</td></tr></table>
</div>
</td></tr></table>
</body>
</html>
