...

View Full Version : Something puts floated spans outside container div in FF



Spudhead
08-09-2005, 04:56 PM
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;
}

Pepe, the bull
08-09-2005, 08:02 PM
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;
}

rmedek
08-09-2005, 08:28 PM
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...



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum