...
PDA

Div Height Problem.. Works in Firefox but Short in IE

php_stud
10-26-2007, 06:54 AM
Guys,

I have just shifted to a table-less CSS design. I created a wrapper div to contain three divs, one for the left panel, center, and right panel.
I set the left panel to background color #eee. What I intend is that the left panel height should be the same with the center panel height. My current code works fine in Firefox but in IE, the left panel won't stretch to the height of the center panel causing a hanging block for the left panel. I dont want to use overflow for the center panel. Is there any other way to achieve this...

Thanks for all the help.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="description" content="Blah blah blah" />
<meta name="keywords" content="key words are here " />
<title>My Site</title>
<link href="styles/stylesheet.css" rel="stylesheet" type="text/css" />
<link rel="shortcut icon" href="images/myicon.ico" />
</head>
<body>

<div id="main">
This is the Header.
</div>

<div id="wrapper">
<div id="mainbody">

<div id="leftpanel"> <!-- start leftpanel -->
This is the navigation panel. The background color is #eee.
</div> <!-- end leftpanel -->

<div id="centerpanel"> <!-- start center panel -->
This is the center panel.
hello worldhello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world
hello worldhello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world
hello worldhello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world
hello worldhello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world
hello worldhello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world
hello worldhello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world
hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world
</div> <!-- end center panel -->

<div id="rightpanel"> <!-- start right panel -->
This is the right panel. Some sub divs are included in this section.
</div> <!-- end right panel -->
</div> <!-- end mainbody -->
</div> <!-- end wrapper -->

<div id="footer" >
This is the footer. Just the footer.
</div>
</body>
</html>


and this is the CSS code
*{ margin: 0px; padding: 0px; }

html { margin: 0px; padding: 0px; font: normal normal normal 11px Tahoma, verdana, sans-serif; line-height: 1.4em }

body{ height: 100%; background: #FCF1E2 url("../images/bg.gif") repeat-x; text-align: center; margin: 0px; padding: 0px; }

#main{ width: 100%; height: 127px; margin: 0px auto; padding: 0px; text-align: left; }

#wrapper{ display: table; width: 100%; height: 100%; margin: 0px; padding: 0px; left; background: #fff url("../images/center_shw.gif") repeat-x bottom; /* clear: both; */ }

#wrapper #mainbody { width: 98%; height: 100%; margin: 0px auto; padding: 0px; border-left: 1px solid #ccc; border-right: 1px solid #ccc; }

#wrapper #mainbody #leftpanel { float: left; width: 19%; height:100%; display: table; margin: 0px; padding: 0px; background: #eee url("../images/leftshw.gif") repeat-x bottom; text-align: left; }

#wrapper #mainbody #centerpanel { float: left; display: block; margin: 0px; padding: 0px; width: 59%; height: 100%; border-left: 1px solid #ccc; border-right: 1px solid #ccc; text-align: left; }

#wrapper #mainbody #rightpanel { float: left; display: table; width: 19.5%; height: 100%; margin: 0px; padding: 0px; text-align: center; }

#footer { clear: both; width: 100%; height: 120px; display: block; background: url("../images/footer_.gif") repeat-x; color: #fff; text-align: left; line-height: 1.4em; margin: 0px; padding: 0px; }
jlhaslip
10-26-2007, 08:35 AM
You need an IE Conditional Comment like on this page:

http://www.jlhaslip.trap17.com/samples/misc/positions/centred.html


* html { margin:0; padding:0; }
html, body { height: 100%; }
#wrapper { min-height: 100%; } /* div you want to stretch */
body { margin:0 auto; text-align:center; }
#wrapper { margin: 0 auto; width:1000px; background-color: #ffeecc; border: 1px solid #666666; }
#header { margin: 1em 0; text-align:center; border-bottom: 1px solid #666666; }
#header h1 { margin: 1em 0; }
p { margin: .75em; padding:.5em; text-align:left }
#footer { margin: 1em auto; padding: 1em; text-align:center; border-top: 1px solid #666666; }
#footer a { margin: 1em auto; padding: .15em; }
<!--[if lte IE 6]>
#wrapper {
height: 100%;
}<![endif]-->Should be clear how to handle that. Except you would want to stretch the outer div. I call it wrapper, but your inner div is "wrapper", so switch something.
php_stud
10-26-2007, 09:17 AM
I appreciate your help.. but, hmmm... there's an overflow method which i dont want to use... i guess i have to redesign :( ... or set the background color of the left panel to simply white :D ... tsktsktsk I hope the world has only one browser!

thanks anyway!

EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum