div’s not lining up in FF

[er!n]

http://beckenhauerconstruction.com/Heal … _Pics.html

can anyone tell me how to fix my pic’s on the page above. each project is a separate div and i just want them to flow one after the other. They line up correctly in IE but not FF.
any advice would be great!

here is my CSS and code
.main {

margin-left:2%;
margin-right:2%;
margin-top:1%;
margin-bottom:1%;
clear:both;
}
.gallery {
float:left;
padding-right:2%;
text-align:center;
color:#CCC;
white-space:nowrap;
width:auto;
}
<div class="main">
<h6>HEALTH CARE PROJECTS<br />
Click on the images below to see a larger image.</h6>
<div class="gallery">
Boone County<br />
Health Center<br />
<img src="images/Thumbs/Health_Care/BooneCoMRI_t.jpg" alt="Boone County Health Center" width="100" height="100" onclick="MM_openBrWindow(‘images/Thumbs/Health_Care/BooneCoMRI.jpg’,”,’width=500,height=375′)" />
<img src="images/Thumbs/Health_Care/BCHCFinishProductPhaseI18_t.jpg" alt="Boone County Health Center" width="100" height="100" onclick="MM_openBrWindow(‘images/Thumbs/Health_Care/BCHCFinishProductPhaseI18.jpg’,”,’width=500,height=375′)" />
</div>
<div class="gallery">
Tri-County Hospital<br /><br />
<img src="images/Thumbs/Health_Care/TriCoBrick.jpg_t.jpg" alt="Tri-County Hospital" width="100" height="100" onclick="MM_openBrWindow(‘images/Thumbs/Health_Care/TriCoBrick.jpg’,”,’width=500,height=375′)" />
<img src="images/Thumbs/Health_Care/tricoMRI_t.jpg" alt="Tri-County Hospital" width="100" height="100" onclick="MM_openBrWindow(‘images/Thumbs/Health_Care/tricoMRI.jpg’,”,’width=500,height=375′)" />
<img src="images/Thumbs/Health_Care/tricounty_t.jpg" alt="Tri-County Hospital" width="100" height="100" onclick="MM_openBrWindow(‘images/Thumbs/Health_Care/tricounty.jpg’,”,’width=500,height=375′)" />
</div>
<div class="gallery">
Jennie M. Melham<br />
Memorial Hospital<br />
<img src="images/Thumbs/Health_Care/JMMMC1_t.jpg" alt="Jennie M. Melham Memorial Hopsital" width="100" height="100" onclick="MM_openBrWindow(‘images/Thumbs/Health_Care/JMMMC1.jpg’,”,’width=500,height=375′)" />
<img src="images/Thumbs/Health_Care/JMMMC5_t.jpg" alt="Jennie M. Melham Memorial Hospital" width="100" height="100" onclick="MM_openBrWindow(‘images/Thumbs/Health_Care/JMMMC5.jpg’,”,’width=500,height=375′)" />
<img src="images/Thumbs/Health_Care/JMMMC_t.jpg" alt="Jennie M. Melham Memorial Hospital" width="100" height="100" onclick="MM_openBrWindow(‘images/Thumbs/Health_Care/JMMMC.jpg’,”,’width=500,height=375′)" />
<img src="images/Thumbs/Health_Care/JMMMCImage from Sofa_t.jpg" alt="Jennie M. Melham Memorial Hospital" width="100" height="100" onclick="MM_openBrWindow(‘images/Thumbs/Health_Care/JMMMCImage from Sofa.jpg’,”,’width=500,height=375′)" /> <img src="images/Thumbs/Health_Care/JMMMCPod Isometric_t.jpg" alt="Jennie M. Melham Memorial Hospital" width="100" height="100" onclick="MM_openBrWindow(‘images/Thumbs/Health_Care/JMMMCPodIsometric.jpg’,”,’width=500,height=375′)" />
</div>
and so on…

[TheDoc]

In your CSS file, add this to your .gallery div:

height:150px;

[er!n]

That did the trick. Thanks!!

[Author]

Posts