float in IE vs FF

[er!n]

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>

[TheDoc]

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:

[Author]

Posts