#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2003
    Posts
    9
    Rep Power
    0

    Vertical align/height issues with divs..(IE6 issues, of course!!!)


    I cannot figure this out. I've tried adding clear: both in several places, I've tried overflow: hidden and I've tried cursing. Nothing works! How can this be fixed so that in IE6 the divs are not staggered vertically??

    Code:
    <div style="height: 38px; margin: 0px; padding: 0px; width: 140px;">
    
    <div style="float: left; height: 38px; width: 38px;"><img style="border: 1px solid #444444; vertical-align: middle" src="http://www.diversifieddesigns.com/GRAPHICS/Spacer.gif" alt="" width="38" height="38" border="0"></div>
    <div style="float: right; height: 38px; width: 102px;">copy</a><br>copy</a></div>
    
    </div>
    
    
    <div style="height: 38px; margin: 0px; padding: 0px; width: 140px;">
    
    <div style="float: left; height: 38px; width: 38px;"><img style="border: 1px solid #444444; vertical-align: middle" src="http://www.diversifieddesigns.com/GRAPHICS/Spacer.gif" alt="" width="38" height="19" border="0"></div>
    <div style="float: right; height: 38px; width: 102px;"><img style="border: 1px solid #444444; vertical-align: middle" src="http://www.diversifieddesigns.com/GRAPHICS/Spacer.gif" alt="" width="38" height="8" border="0"></div>
    
    </div>
  2. #2
  3. Classical Computing
    Devshed Novice (500 - 999 posts)

    Join Date
    May 2008
    Location
    Melbourne, Australia
    Posts
    891
    Rep Power
    106
    Originally Posted by AshleyQuick
    "staggered vertically"
    I tried cursing over your terminology, but it didn't help me either! Be really clear about what's happening, and provide a link if you can.
    Simple is beautiful.
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2003
    Posts
    9
    Rep Power
    0
    LOL, sorry! I was beyond frustrated at that point. I finally fixed the issue (the divs were not vertically aligned):

    <div style="margin: 0px; padding: 0px; width: 140px;">

    <div style="float: left; width: 40px;"><img style="border: 1px solid #444444; vertical-align: middle" src="http://www.diversifieddesigns.com/GRAPHICS/Spacer.gif" alt="" width="38" height="38" border="0"></div>
    <div style="float: right; width: 100px;">copy</a><br>copy</a></div>

    </div>


    <div style="clear: both; margin: 0px; padding: 0px; width: 140px;">

    <div style="float: left; width: 40px;"><img style="border: 1px solid #444444; vertical-align: middle" src="http://www.diversifieddesigns.com/GRAPHICS/Spacer.gif" alt="" width="38" height="19" border="0"></div>
    <div style="float: right; width: 100px;"><img style="border: 1px solid #444444; vertical-align: middle" src="http://www.diversifieddesigns.com/GRAPHICS/Spacer.gif" alt="" width="38" height="8" border="0"></div>

    </div>

IMN logo majestic logo threadwatch logo seochat tools logo