SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    Non-Member
    Join Date
    Sep 2009
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Why css float dose not work on firefox and how to improve

    my blog is built by wordpess, content sigle page and sidabar, i used float:left, not use clear:both, but now it dispaly normal on ie7, but does not work on firefox, sidebar does not float on its position, it display on bottom of article content,

    I need left is article content, right is sidebar, all height is auto, how to inprove it?

    This is main css:

    #wrapper {width: 950px;margin: auto;text-align: left;padding-bottom: 2px;}

    #header {height: 60px;padding-top: 15px;margin:0px ;background-color:#FEFFFB;}

    #body {background-color:#FFFFFF;color:#003300;padding-bottom: 10px;
    border:1px #006600 dashed; }

    #page {margin:10px;float:left;padding-top:0px;overflow:hidden;
    width:620px;}

    #sidebar {width: 300px;float:left;padding: 5px;}

  2. #2
    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)
    Hi,
    IE7 will contain it's floats when "haslayout" has been set. The width on your #wrapper div is causing IE7 to contain floats.

    Modern browsers will contain their floats by setting overflow:hidden; on the float's parent.

    Try this -
    Code:
    #wrapper {
    width: 950px;
    overflow:hidden;
    margin: auto;
    text-align: left;
    padding-bottom: 2px;
    }
    If that does not work we will need a link to your page so we can see what you have done with the html. Or post the html if you don't have a link.

  3. #3
    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)
    If those floats are nested in the #body div then the 1px border on the #body div could be causing the float drop. The available space in the #body div would be 948px (assuming it is nested in the #wrapper) and your combined float widths with margins and padding are 950px.


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
  •