Grow your CSS skills. Land your dream job.

div’s not lining up in FF

  • # March 26, 2009 at 4:00 pm

    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…

    # March 26, 2009 at 4:19 pm

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

    height:150px;

    # March 26, 2009 at 4:27 pm

    That did the trick. Thanks!!

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".