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

    Join Date
    Sep 2007
    Posts
    20
    Rep Power
    0

    Three-column divs not working in IE


    In internet explorer, the image in the middle column keeps getting bumped down to the next line. I can't figure out why. Any help would be very appreciated.

    I've got this for my CSS:
    Code:
    #imageLeft {
    	width:260px;
    	height: 260px;
    	position:relative;
    	float: left;
    	text-align: center;
    }
    #imageMiddle {
    	position:relative;
    	padding: 0px 260px 0px 260px;
    	margin: 0px;
    	height: 260px;
    	text-align: center;
    	z-index:-1;
    }
    #imageRight {
    	position:relative;
    	width:260px;
    	height: 260px;
    	float: right;
    	text-align: center;
    }
    #imageLeft img {
    	position: absolute;
    	top: 0;
    	bottom: 0;
    	left: 0;
    	right: 0;
    	margin: auto;
    	max-height:250px;
    	max-width:250px;
    	height: auto;
    	width: auto;
    }
    #imageMiddle img {
    	position: absolute;
    	top: 0;
    	bottom: 0;
    	left: 0;
    	right: 0;
    	margin: auto;
    	max-height:250px;
    	max-width:250px;
    	height: auto;
    	width: auto;
    }
    #imageRight img {
    	position: absolute;
    	top: 0;
    	bottom: 0;
    	left: 0;
    	right: 0;
    	margin: auto;
    	max-height:250px;
    	max-width:250px;
    	height: auto;
    	width: auto;
    }
    ...this for my HTML:
    Code:
    <div id="imageLeft">
    	<img src="http://be-hold.com/images/Sander.jpg" width="" height="" alt="" />
    </div>
    <div id="imageRight">
    	<img src="http://be-hold.com/images/Witt.jpg" width="" height="" alt="" />
    </div>
    <div id="imageMiddle">
    	<img src="http://be-hold.com/images/Erwitt.jpg" width="" height="" alt="" />
    </div>
    ...and this mess in I.E.
    http://www.be-hold.com/
  2. #2
  3. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2011
    Location
    The Pleiades
    Posts
    298
    Rep Power
    8
    Good morning,

    I've just checked in IE 8,9 and 10 and I don't seem to notice anything out of the ordinary. Some images appear lower than others but that is because of the height of those images.

    For arguments sake, give all the images a fixed width and height and you will notice they all align perfectly.

    Kind regards,

    NM.
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2011
    Posts
    118
    Rep Power
    50
    I've just checked in IE 8,9 and 10 and I don't seem to notice anything out of the ordinary.
    FWIW, I did see oddities when I went down to IE 7, so I'm guessing that's the target problem. (?) I didn't see a quick/obvious solution though.

IMN logo majestic logo threadwatch logo seochat tools logo