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 3 of 3
  1. #1
    New Coder
    Join Date
    Apr 2004
    Posts
    24
    Thanks
    0
    Thanked 0 Times in 0 Posts

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

    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.

    Code:
    <!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
    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; }

  • #2
    Regular Coder
    Join Date
    Feb 2007
    Location
    Canada
    Posts
    924
    Thanks
    10
    Thanked 56 Times in 55 Posts
    You need an IE Conditional Comment like on this page:

    http://www.jlhaslip.trap17.com/sampl...s/centred.html

    Code:
    * 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.
    Last edited by jlhaslip; 10-26-2007 at 08:38 AM.

  • #3
    New Coder
    Join Date
    Apr 2004
    Posts
    24
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thanks

    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 ... tsktsktsk I hope the world has only one browser!

    thanks anyway!


  •  

    Posting Permissions

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