hey everyone!

The problem is, that in IE 6 the 3 columns just fall under each other ...so in otherwise its just 1 column. It works fine in ...Firefox, Safari, IE 7, and probally most other broswers. I am unsure on what I would do to fix this. The site that the problem is occuring on is... http://www.ezgraphicstudio.com


The section of my css for this is....

/************************ LEFT SIDE COLUMN *****************/
#left {
       float:left;
	padding: 5px;
	width:18%;
	}
	
#left h1, #right h1 {
	font-size:15px;
	padding-top:5px;
	font-family:helvetica, arial, georgia, times, sans-serif;
	border-bottom:1px dotted #c4c4c4;
}

#left p {
	font-size:10px;
	padding-bottom:10px;
	margin-top:-3px !important; /*****  FIREFOX  *****/
	margin-top:-14px;             /***** INTERNET EXLORER *****/
	color:#404040;
}	
/************************** MAIN CONTENT IN MIDDLE ******************/

#middle {
       float:left;
	width:54%;
	line-height:1.01em;
	padding-left:3.5%;
	padding-right:3.5%;
}
	
#middle p, p {
	font-size:10px;
	color:#404040;
}

#middle h1 {
	font-family:"Century Gothic", verdana, arial, times, sans-serif;
	font-size:21px;
	font-weight:normal;
	border-bottom:1px solid #c4c4c4;
	padding-bottom:3px;
	margin-top:24px;
}
/***************************  RIGHT COLUMN  *********************/
#right {
       float:left;
	padding-top: 5px;
        margin-left: -15px;
	font-size:11px;
	width:18%;
	line-height:1.6em;
}

#right a {
	line-height:2em;
	
}

#right br {
	line-height:0.7em;
}

You need to take into account that padding is part of the overall with

so...

#left {float:left; padding: 5px; width:18%;}

= 18% +5px + 5px

I agree that the issue is likely in the widths of the three columns. When I've done 3 column layouts I'll usually specify the right and left columns in px and just let the middle column fill the rest.

I think the case here is when you add up all the widths including the paddings and borders and anything else IE adds in there you'll find it's two wide for the overall wrapper and has not choice, but to drop down too low. Try reducing the widths and see if that fixes things.

By the way the design looks really nice in Firefox.

Your #middle is too wide, basically. Put a temporary 1px red border around it and you'll see it. IE doesn't do it correctly !

IE's box model is broken, so you must adjust for that:

http://www.positioniseverything.net/ie-primer.html