Forum Moderators: not2easy
In FF2, the left and right floated areas ("leftsidearea" and "rightsidearea") are on different lines, whereas they should of course be on the same line.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html><body>
<style>
.leftsidearea { float: left; border: 1px solid black }
.rightsidearea { float: right; border: 1px solid blue }
.rightsidearea .welcome { float: right; border: 1px solid red }
.rightsidearea .fullname { float: right; border: 1px solid pink }
</style><div class="leftsidearea">
in FF2, this is on it's own line - bug?
</div>
<div class="rightsidearea">
<div class="fullname">Username Here</div>
<div class="welcome">Welcome, </div>
</div>
</body>
</html>
Any ideas how this can be made to work in FF2?
Contrary to the IE adepts, FF users do upgrade their browser.
So is it "not quite on the right height" a real problem for your visitors or are those still on FF2 just not interested in proper rendering and hence can be safely ignored ?
Anyway I've long ago stopped caring how stuff renders in FF2.
<div class="rightsidearea">No change to the CSS, both areas are still floats. Subsequent html flows beneath them, which is what I want.
<div class="leftsidearea">
in all browsers this is now on the same line
</div>
<div class="fullname">Username Here</div>
<div class="welcome">Welcome, </div>
</div>
With this arrangement, though, I wondered for a while why "float:right" was being given 100% width in all browsers... then I realised, it's because there's a float:left inside the float:right, so the float:right is getting it's left hand side "pulled" across to the left by the float:left inside it. So it ends up being 100% width, like an elastic band pulled both ways. Makes sense.
