The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Chrome/Safari collapsing div issue

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • #37559
    Steven Gardner

    I find myself in this unusual place of debugging Chrome & Safari. They usually work for me with no problems.
    The problem is with my main div collapsing. Works fine in FF, IE8< & Opera

    Header Stuff


    Footer Stuff
    .clearfix:before, .clearfix:after { content: ""; display: table; }
    .clearfix:after { clear: both; }
    .clearfix { zoom: 1; display:inline;}
    header {display:block;}
    #main {display:block;height:100%; width:954px; padding:18px 0 20px; background:#fff;}
    #content {position:relative;display:block;width:636px;margin:0;padding:12px;float:left;}
    #sidebar {position:relative;display:block;width:276px;margin:0;padding:12px 0 12px 12px;float:right;}
    footer {display:block;clear:both;}

    Has anyone come up against this problem before or have any suggestions.

    Steven Gardner

    I have since added display:block to the .clearfix property. will have to check cross browsers to see if this effects things. If not this is a fix for this problem.


    You’re using the clearfix method incorrectly. There is nearly never a good reason to use an extraneous empty div as you have here to apply the clearfix. In your example the clearfix class belongs on the #main div.

    So, you could leave your .clearfix div (I don’t suggest it) and apply clear: both; to it, which would force #main to enclose the floats.

    Or, you could remove the .clearfix div and place the class on the #main div.

    Or, you could remove the .clearfix div and simply add overflow: hidden; to #main to have it enclose the floating children.

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.