Grow your CSS skills. Land your dream job.

float in IE vs FF

  • # March 19, 2009 at 3:50 pm

    How can I correct my CSS so my div’s float the same in IE and FF. They look how I want in IE, but in FF they don’t all float left. I am using about 6 small div’s, the first couple line up correctly on the first line, then when they wrap onto the second line, there is only one on the line and it is on the right side not the left, then they continue to wrap down to the next line.
    Here is my CSS and the code from my page.
    Any help would be great.

    #main {
    width:96%;
    margin-left:2%;
    margin-right:2%;
    margin-top:1%;
    margin-bottom:1%;
    clear:both;
    }
    #gallery {
    float:left;
    margin-left:1%;
    margin-right:1%;
    text-align:center;
    color:#CCC;
    white-space:nowrap;
    }

    <div id="main">
    <h6>RElIGIOUS PROJECTS PHOTO GALLERY<br />
    Click on the images below to see a larger image.</h6>
    <div id="gallery">
    First Baptist Church<br />
    Norfolk, NE<br />
    <image/>
    <image/>
    <image />
    </div>
    <div id="gallery">
    Christ Lutheran<br />
    Norfolk, NE<br />
    <image/>
    </div>
    </div>

    # March 19, 2009 at 4:12 pm

    Sounds like your floats aren’t being cleared.

    When floated objects have different heights, and you don’t clear them after a line, things will go wrong.

    Without posting a link to the site, it’s tough to tell you exactly where to put the clear.

    Into your css:

    Code:
    .clear {
    clear:both;
    }

    Somewhere into your HTML (essentially, just before things start screwing up for you):

    Code:
    # March 19, 2009 at 4:15 pm

    Link?

    If it’s working in IE and not FF then something is seriously wrong. You would be much better off developing in FF and then addressing issues in IE as Firefox is a much more standards compliant browser.

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".