Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Senior Coder Spudhead's Avatar
    Join Date
    Jun 2002
    Location
    London, UK
    Posts
    1,856
    Thanks
    8
    Thanked 110 Times in 109 Posts

    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

    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;
    }

  • #2
    Regular Coder Pepe, the bull's Avatar
    Join Date
    Feb 2005
    Location
    Vancouver, WA
    Posts
    163
    Thanks
    1
    Thanked 16 Times in 16 Posts
    You could remove the float:left; from .header and change the order of the span's to
    Code:
    <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.
    Code:
    .header_right{
    	padding-top:6px;
    	float:right;
    	width:150px;
    	font-family:Verdana;
    	font-size:9pt;
    	color:#663300;
    	text-align:right;
    	vertical-align:sub;
    }
    Last edited by Pepe, the bull; 08-09-2005 at 08:07 PM.
    Pepe, the bull

  • #3
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    In FF 1.0.6 - they've jumped out of their container div

    I fear that the internet may have broken
    Nope, FF is rendering correctly here. You forgot to clear your floats. Try this:
    Code:
    .headercontainer:after{
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    height: 0;
    }
    One markup free way to clear them, or you could add:
    Code:
    <div style="clear: both;"><!-- clearing div --></div>
    after the floated elements. Hope this helps...


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •