• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

[CSS] div height not stretching

#1
Hi
I seem to be unable to get my div cell to stretch to the bottom of the page. If you look at the screenie I posted it should show you what happens.
anyone got any ideas?

Cheers
 

Attachments

#3
LOL
Sorry.
Here is my CSS
Code:
.clearfix:after {
  	content: "."; 
  	display: block; 
  	height: 0; 
  	clear: both; 
  	visibility: hidden;
  }
  
  /* Hides from IE-mac \*/
  * html .clearfix {height: 1%;}
  /* End hide from IE-mac */
  .frame {
  	text-align: left;
  	width: 780px;
  	background-color: #F4E8C7;
  	margin-right: auto;
  	margin-left: auto;
  	padding: 0px;
  }
  .header {
  	background-color: #000084;
  	text-align: left;
  	height: auto;
  	padding: 0px;
  	width: 780px;
  }
  .footer {
  	font-family: Verdana, Arial, Helvetica, sans-serif;
  	font-size: 12px;
  	background-color: #FFFFFF;
  	text-align: left;
  	height: auto;
  	padding: 0px;
  	width: 780px;
  	border-top-width: 1px;
  	border-top-style: solid;
  	border-top-color: #000000;
  }
  .menu_bar {
  	text-decoration: none;
  	background-color: #FFFFFF;
  	height: 17px;
  	padding: 0px;
  	text-align: left;
  	width: auto;
  }
  .status {
  	font-family: Verdana, Arial, Helvetica, sans-serif;
  	font-size:10px;
  	text-decoration: none;
  	background-color: #FFFFFF;
  	height: 17px;
  	padding: 0px;
  	text-align: center;
  	width: auto;
  	border-bottom-width: 1px;
  	border-bottom-style: solid;
  	border-bottom-color: #000000;
  }
  div.clearer {
  	clear: left;
  	line-height: 0;
  	height: 0;
  }
  .center_content_bar {
  	padding: 0px 0px 0px;
  	float: left;
  	width: 580px;
  	background-color: #FFFFFF;
  	border-right-width: 1px;
  	border-left-width: 1px;
  	border-right-style: solid;
  	border-left-style: solid;
  	border-right-color: #000000;
  	border-left-color: #000000;
  	border-top-width: 1px;
  	border-top-style: solid;
  	border-top-color: #000000;
  }
  .center_content_bar .departments {
  	font-family: Verdana, Arial, Helvetica, sans-serif;
  	font-size: 12px;
  	text-decoration: none;
  	float: left;
  	height: auto;
  	width: 100%;
  	padding-top: 5px;
  	padding-right: 0px;
  	padding-bottom: 0px;
  	padding-left: 0px;
  	background-image: url(../grey.gif);
  	background-repeat: repeat-x;
  }
  .left_content_bar {
  	padding: 0px;
  	float: left;
  	width: 198px;
  	background-color: #F4E8C7;
  	height: 100%;
  	border-top-width: 1px;
  	border-top-style: solid;
  	border-top-color: #000000;
  }
  .left_content_bar .departments {
  	font-family: Verdana, Arial, Helvetica, sans-serif;
  	font-size: 12px;
  	text-decoration: none;
  	float: left;
  	height: auto;
  	width: 100%;
  	padding-top: 5px;
  	padding-right: 0px;
  	padding-bottom: 0px;
  	padding-left: 0px;
  	background-image: url(../grey.gif);
  	background-repeat: repeat-x;
  }
And heres the HTML
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 <html>
 <head>
 <title><? echo $title ?></title>
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
 <link href="/css/layout.css" rel="stylesheet" type="text/css">
 <style type="text/css">
 <!--
 body,td,th {
 	color: #000000;
 }
 body {
 	background-color: #000084;
 	margin-left: 0px;
 	margin-top: 0px;
 	margin-right: 0px;
 	margin-bottom: 0px;
 }
 a:link {
 	color: #000000;
 	text-decoration: none;
 }
 a:visited {
 	text-decoration: none;
 	color: #000000;
 }
 a:hover {
 	text-decoration: underline;
 	color: #000000;
 }
 a:active {
 	text-decoration: none;
 	color: #000000;
 }
 -->
 </style>
 </head>
 <body> 
 <!-- DHTML Menu Builder Loader Code START --> 
 <div id=DMBRI style="position:absolute;"> <img src="/menu/dmb_i.gif" name=DMBImgFiles width="1" height="1" border="0" alt=""> <img src="/menu/dmb_m.gif" name=DMBJSCode width="1" height="1" border="0" alt=""> </div> 
 <script language="JavaScript" type="text/javascript">
 var rimPath=null;var rjsPath=null;var rPath2Root=null;function InitRelCode(){var iImg;var jImg;var tObj;if(!document.layers){iImg=document.images['DMBImgFiles'];jImg=document.images['DMBJSCode'];tObj=jImg;}else{tObj=document.layers['DMBRI'];if(tObj){iImg=tObj.document.images['DMBImgFiles'];jImg=tObj.document.images['DMBJSCode'];}}if(!tObj){window.setTimeout("InitRelCode()",700);return false;}rimPath=_gp(iImg.src);rjsPath=_gp(jImg.src);rPath2Root=rjsPath+"../";return true;}function _purl(u){return xrep(xrep(u,"%%REP%%",rPath2Root),"\\","/");}function _fip(img){if(img.src.indexOf("%%REL%%")!=-1) img.src=rimPath+img.src.split("%%REL%%")[1];return img.src;}function _gp(p){return p.substr(0,p.lastIndexOf("/")+1);}function xrep(s,f,n){if(s) s=s.split(f).join(n);return s;}InitRelCode();
 </script> 
 <script language="JavaScript" type="text/javascript">
 function LoadMenus() {if(!rjsPath){window.setTimeout("LoadMenus()", 10);return false;}var navVer = navigator.appVersion;
 if(navVer.substr(0,3) >= 4)
 if((navigator.appName=="Netscape") && (parseInt(navigator.appVersion)==4)) {
 ;} else {
 document.write('<' + 'script language="JavaScript" type="text/javascript" src="' + rjsPath + 'ieintmenu.js"><\/script\>');
 }return true;}LoadMenus();</script> 
 <!-- DHTML Menu Builder Loader Code END --> 
 <div class="frame"> 
   <div class="header"><a href="/index.php"?><img src="/images/shieldwhite.gif" alt="" border="0"></a><img src="/images/curvewhite.gif" alt=""><img src="/images/head.gif" alt=""></div> 
   <div class="menu_bar"><img src="/images/spacer.gif" name="menu" width="1" height="1" id="menu"></div>
   <div class="status"><div id="liveclock"></div>
 	<script language="JavaScript" type="text/javascript">
 	<!--
 setuplayer();
 //-->
 </script></div>
   <div class="left_content_bar"> 
 	<div class="departments"><strong><br><? 
 	 include "system\menubuilder.php";?>
 	  </strong>
 	</div> 
   </div> 
   <div class="center_content_bar"> 
 	<div class="departments"> 
 <? echo $content ?> <br>
 echo '<div align="right"><a href="print/"><img src=http://newintranet/images/print.gif border=0></a> <a href="print/">Print this</a>&nbsp;&nbsp;</div>';
  </div> 
   </div> 
   <div class="footer"> <strong>HELP: </strong> 
 	<?
    include "system/helpsys.php" ?> 
   </div> 
   <div class="clearer">&nbsp;</div> 
 </div> 
 </body>
 </html>
 
#4
put this in the css:

html, body { height: 100%; min-height:100%;}

also put the attribute min-height: 100%; under the hieght:100% you already have

Be happy
 

Members online

No members online now.

Latest posts

Latest profile posts

Hello, is there anybody in there? Just nod if you can hear me ...
Xie
What a long strange trip it's been. =)

Forum statistics

Threads
61,960
Messages
673,237
Members
89,011
Latest member
grovo_test