treehouse : what would you like to learn today?
Web Design Web Development iOS Development

div's not lining up in FF

  • 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...
  • In your CSS file, add this to your .gallery div:

    height:150px;
  • That did the trick. Thanks!!