Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    Regular Coder FWDrew's Avatar
    Join Date
    Apr 2008
    Location
    Missouri
    Posts
    380
    Thanks
    38
    Thanked 45 Times in 43 Posts

    Basic 3 Column Fixed-IE 6 Issue

    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/3col...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

  • #2
    Senior Coder rangana's Avatar
    Join Date
    Feb 2008
    Location
    Cebu City, Philippines
    Posts
    1,752
    Thanks
    65
    Thanked 372 Times in 365 Posts
    See if removing the highlighted helps
    Code:
    #centercolumn {
    	background-color:rgb(203,232,107);
    	min-height:300px;
    	height:auto !important;
    	height:300px;
    	width:100%;
    	
    	
    }
    Learn how to javascript at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph

  • Users who have thanked rangana for this post:

    FWDrew (05-15-2008)

  • #3
    Regular Coder FWDrew's Avatar
    Join Date
    Apr 2008
    Location
    Missouri
    Posts
    380
    Thanks
    38
    Thanked 45 Times in 43 Posts
    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

  • #4
    Senior Coder rangana's Avatar
    Join Date
    Feb 2008
    Location
    Cebu City, Philippines
    Posts
    1,752
    Thanks
    65
    Thanked 372 Times in 365 Posts
    Put your three divs into one wrapper:
    Code:
    <!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>
    Learn how to javascript at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph

  • #5
    Regular Coder FWDrew's Avatar
    Join Date
    Apr 2008
    Location
    Missouri
    Posts
    380
    Thanks
    38
    Thanked 45 Times in 43 Posts
    Should have thought of that. Thanks for all your help as always Rangana, works perfectly now.

    Drew


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •