Something puts floated spans outside container div in FF

http://www.revolutionstream.net/admin/login.asp

In IE6 - not bad. I'd like to drop the "[back]" link down so it's on the same baseline as the page title (any hints?), but at least it's aligned right and safely wrapped in its container div.

In FF 1.0.6 - they've jumped out of their container div :mad:

I fear that the internet may have broken :(

CSS:

#content{
position:relative;
clear:both;
width:600px;
height:400px;
border: 1px dashed #663300;
margin:50px 5px 5px 180px;
padding:5px;
text-align:left;
background-color:#CCCC99;
}
.headercontainer{
width:100%;
border: 1px dashed #663300;
}
.header{
float:left;
width:300px;
font-family:Verdana;
font-size:14pt;
color:#663300;
font-weight:bold;
}
.header_right{
float:right;
width:150px;
font-family:Verdana;
font-size:9pt;
color:#663300;
text-align:right;
vertical-align:sub;
}

You could remove the float:left; from .header and change the order of the span's to

<div class="headercontainer">
<span class="header_right"><a class="bodylink" href="javascript:history.go(-1)">[back]</a></span>
<span class="header">Login</span>
</div>

Adding top padding to .header_right will move the [back] down some.

.header_right{
padding-top:6px;
float:right;
width:150px;
font-family:Verdana;
font-size:9pt;
color:#663300;
text-align:right;
vertical-align:sub;
}

In FF 1.0.6 - they've jumped out of their container div :mad:

I fear that the internet may have broken :(

Nope, FF is rendering correctly here. You forgot to clear your floats. Try this:

.headercontainer:after{
content: ".";
display: block;
clear: both;
visibility: hidden;
height: 0;
}


One markup free way to clear them, or you could add:

<div style="clear: both;"><!-- clearing div --></div>

after the floated elements. Hope this helps...