IE 6 Three Column issue

**jamiec** · Jan 18, 2007 00:51

Hi All,

I've run into an issue with a div I'm creating. It's a simple div that includes 3 columns in it.

It works fine in IE7, Firefox 2 and Opera 9, but in IE6 the center column drops below the others.

The three columns all hold images. Without the images the columns are fine. I think I'm not using the clear div properly, but I'm not sure.

If anyone has any ideas, or even a better way to code it, I love to hear it.

Thanks in advance...

Code:

 
#boxBlueShadeAd {
width: 600px;
background: #fff url(/images/layout/blueShadeBack.png) no-repeat;
}
#boxBlueShadeAd .innertubeAd {
padding: 11px;
}
#boxBlueShadeAd .leftAd {
float: left;
width: 186px;
}
#boxBlueShadeAd img {
border: 1px solid #c3dbea;
margin-bottom: 7px;
}
#boxBlueShadeAd .centerAd {
margin-left: 196px;
margin-right: 196px;
}
#boxBlueShadeAd .rightAd {
float: right;
width: 186px;
}
#clearAd {
clear: both;
}

Code:

<div id="boxBlueShadeAd">
 <div class="innertubeAd">
  <div class="leftAd">
   <img src="/images/layout/spacer.png" width="184" height="98" alt="Left Ad" />
  </div>
  <div class="rightAd">
   <img src="/images/layout/spacer.png" width="184" height="43" alt="Right Ad 1" />
   <img src="/images/layout/spacer.png" width="184" height="43" alt="Right Ad 2" />
  </div>
  <div class="centerAd">
   <img src="/images/layout/spacer.png" width="184" height="98" alt="Center Ad" />
  </div>
 </div>
 <div id="clearAd"></div>
</div>

**deathshadow** · Jan 18, 2007 03:52

Welcome to the world of IE extra padding non-float elements next to floats... aka the 'three pixel jog'.

I'd 'fix' it by instead of doing left/right/center, just stacking all elements as float:left in left/center/right order.

Otherwise you will have to 'hack' it to work in IE (something I personally abhore the thought of) - check the CSS FAQ for the 'three pixel jog' on how to do that.

ALSO, you might want to make 100% sure you've declared that images have no borders as IE adds a 1px border to images by default - AND you should also be declaring some form of float on your container or manually declare it's height so the container box is the same size as it's content - since stuff is floating the only reason you're getting the proper height is the non-floated centerAd.

AND (oh boy) I'd suggest just dropping all those extra DIV that really aren't doing anything for you... and I'd likely drop the clear since all your content adds up to a unified height and width. (so you shouldn't have to clear anything)... and check your doctype to make sure you aren't in quirks mode. (part of why most of the people here ask for the full code is to check for simple stuff like that)

All in all, you are using about twice the code you need to, and in general overthinking your layout given that it's all fixed size elements.

SO: How I'd have coded that...

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Float test</title>

<style type="text/css">

* {
	margin:0px;
	padding:0px;
}

#boxBlueShadeAd {
	width:589px;
	height:98px;
	background:#EEE url(/images/layout/blueShadeBack.png) no-repeat;
	padding:11px 0px 11px 11px; 
	/* 
		I omitted right padding as a safety measure 
		Just in case jog appears for some wierd reason
	*/
}

#boxBlueShadeAd img {
	width:184px;
	height:98px;
	border:none;
	float:left;
	background-color:#DDD;
}

#boxBlueShadeAd img.short {
	height:43px;
	margin-bottom:10px;
}

#boxBlueShadeAd img.center {
	margin:0px 13px;
}

</style>

</head><body>

<div id="boxBlueShadeAd">
   <img src="/images/layout/spacer.png" alt="Left" />
   <img src="/images/layout/spacer.png" alt="Center" class="center" />
   <img src="/images/layout/spacer.png" alt="Right 1" class="short" />
   <img src="/images/layout/spacer.png" alt="Right 2" class="short" />
</div>
<p>Test, are we 'clear'?</p>

</body></html>

and because the floats are constrained inside a DIV, you shouldn't need to clear it.

Oh, and I pulled the word 'ad' from the alt text because it was making my opera ad block user.css not display the images.

The background-color's were added since I wasn't working with the actual images.

Hope this helps.

User Tag List

Thread: IE 6 Three Column issue

Thread Tools

Display

IE 6 Three Column issue

Bookmarks

Bookmarks

Posting Permissions