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...
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...
height:150px;