...

View Full Version : Basic 3 Column Fixed-IE 6 Issue



FWDrew
05-15-2008, 03:13 AM
Hi all,

Well I am slightly embarrassed as I am having trouble getting a very basic 3 column layout working in IE 6 and 7, I dont know if I am just being ignorant but I cant seem to find the issue.

Here is the page: http://drewsdesigns.com/layouts/3colfixed/3colfixed.html

And a screenshot of IE 6 (looks the same in IE 7 also):
http://drewsdesigns.com/layouts/3colfixed/ie6shot.png

My thoughts are that it has to do either with the width of the content div or possibly a float issue?

Thanks,

Drew

rangana
05-15-2008, 03:18 AM
See if removing the highlighted helps :)


#centercolumn {
background-color:rgb(203,232,107);
min-height:300px;
height:auto !important;
height:300px;
width:100%;


}

FWDrew
05-15-2008, 03:33 AM
Hi Rangana :)

Thanks for the quick reply, that worked great except for one small detail.

According to this browser shot (I dont have IE), there is a tiny gap between the content and two columns...any remedies? http://drewsdesigns.com/layouts/3colfixed/ie6shot2.png

Again thanks for your help,

Drew

rangana
05-15-2008, 03:47 AM
Put your three divs into one wrapper:



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type"/>
<meta name="copyright" content="date | your name or name of company" />
<meta name="author" content="" />
<meta name="keywords" content=" " />
<meta name="description" content=" " />
<style type="text/css">
/**************************************************************************************************** **********************************************************************Basic 3 Column Fixed Layout*************************************************/
* {
margin:0;
padding:0;
}
body {
margin:0;
padding:0;
color:red;
}
#header {
width:100&#37;;
background-color:#F2E9E1;
height:100px;
}
#leftcolumn {
background-color:rgb(28,20,13);
min-height:300px;
height:auto !important; /******IE 6 and 7 Hack for min-height*******/
height:300px;
width:115px;
float:left;
margin:0;
padding:0;
}
#centercolumn {
background-color:rgb(203,232,107);
min-height:300px;
height:auto !important;
height:300px;
}
#rightcolumn {
background-color:rgb(28,20,13);
min-height:300px;
height:auto !important;
height:300px;
float:right;
width:115px;
}
#footer {
background-color:rgb(242, 233, 225);
width:100%;
height:75px;
text-align:center;
clear:both;
}
#wrap{background-color:rgb(203,232,107);}
</style>
<title>|| 3 Column Fixed Width Layout ||</title>
</head>
<body>
<!--Basic 3-column fixed layout by Drew Douglass of DrewsDesigns.com -->
<div id="header">Header</div>
<div id="wrap">
<div id="leftcolumn">Left Column</div>
<div id="rightcolumn">Right Column</div>
<div id="centercolumn">Content</div>
<div id="footer">Footer</div>
</div>
</body>
</html>

FWDrew
05-15-2008, 03:55 AM
:o Should have thought of that. Thanks for all your help as always Rangana, works perfectly now.

Drew



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum