SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Enthusiast
    Join Date
    Jun 2008
    Posts
    41
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy Float in foxfire does not work properly.

    I have an outside container called pagecontainer and an inside container called main. I put a container/div in main called leftside and as soon as I add the float left the div extends down past the pagecontainer and main div's. It should just expand the pagecontainer and main divs to hold the leftside div right?

    It works fine in IE7 but not foxfire and google chrome.

    What am I missing here? Any help would be greatly appreciated.

    --------------------------------------------------------------------
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    * {
    margin:0;
    padding:0;
    border:0;
    }
    html {
    color:black;
    margin: 0 auto;
    text-align: center;
    }
    body {
    color:black;
    background-color:black;
    text-align: center;/* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #pagecontainer selector */
    }
    #pagecontainer {
    position:relative;
    margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
    text-align: left; /* this overrides the text-align: center on the body element. */
    border:thin solid #9F0;
    width:98%;
    background-color:white;
    height:auto;
    }
    #main {
    position:relative;
    background-color:white;
    border: thick solid yellow;
    width:96.65%;
    height:auto;
    }
    #leftside {
    background-color:#cfcfcf;
    border: thick solid pink;
    position:relative;
    float:left;
    width:157px;
    }
    #leftspacer {
    position:relative;
    background-color:#bcbcbc;
    background-position:center;
    height:15px;
    width:157px;
    text-align:center;
    }
    #ccname {
    height:60px;
    width:157px;
    background-color:#ABABAB;
    }
    </style>
    </head>

    <body>
    <div id="pagecontainer">
    pagecontainer
    <div id="main">
    main<br />
    <div id="leftside">
    Leftside
    <div id="leftspacer">
    </div><!-- End of leftspacer -->
    <div id="ccname">
    cclogo
    </div><!-- End of ccname -->
    </div><!-- End of leftside -->
    Line 2<br />
    Line 3<br />
    </div><!-- End of main -->
    </div><!-- End of pagecontainer -->
    </body>
    </html>

  2. #2
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No, Firefox is handling this correctly according to the specs. As a float is taken out of the flow of the document, a container should not automatically surround the float unless forced to do so - IE gets this wrong when HasLayout is triggered on the container. To force the container to surround the float, the overflow property can be used :
    Code:
    #main {
    	position:relative;
    	background-color:white;
    	border: thick solid yellow;
    	width:96.65%;
    	height:auto;
    	overflow: hidden;
    }

  3. #3
    SitePoint Guru glenngould's Avatar
    Join Date
    Nov 2005
    Posts
    662
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Edit:

    Centauri is right. See if you add a non floated element just after the #leftside you won't need overflow.

    HTML Code:
    </div><!-- End of leftside --><div style="clear:left"></div>
    Tweep List adds an avatar menu to Twitter (open source) ---------- Word Stats shows your most used words on Twitter

  4. #4
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    And here is a live test-case that progressively explains everything mentioned above.
    http://stommepoes.nl/floaties.html

  5. #5
    SitePoint Evangelist Ed Seedhouse's Avatar
    Join Date
    Aug 2006
    Location
    Victoria, B.C. Canada
    Posts
    592
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    "Foxfire"?
    Ed Seedhouse

  6. #6
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Ed Seedhouse View Post
    "Foxfire"?
    I know that some browsers have nicknames.

    Internet Exploder

    Pooperah.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  7. #7
    SitePoint Enthusiast
    Join Date
    Jun 2008
    Posts
    41
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry I have done alot of foxpro programming over the years. Foxfire just slips out.



Bookmarks

Posting Permissions

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