[CSS] div height not stretching

ZeroHour

ho3 ho3 ho3
Joined
22 Mar 2004
Messages
1,118
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

  • css problem.JPG
    css problem.JPG
    47.7 KB · Views: 144
Link? Code? We can't help you by guessing what code problem you have ;0)
 
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>
 
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 profile posts

Also Hi EP and people. I found this place again while looking through a oooollllllldddd backup. I have filled over 10TB and was looking at my collection of antiques. Any bids on the 500Mhz Win 95 fix?
Any of the SP crew still out there?
Xie wrote on Electronic Punk's profile.
Impressed you have kept this alive this long EP! So many sites have come and gone. :(

Just did some crude math and I apparently joined almost 18yrs ago, how is that possible???
hello peeps... is been some time since i last came here.
Electronic Punk wrote on Sazar's profile.
Rest in peace my friend, been trying to find you and finally did in the worst way imaginable.

Forum statistics

Threads
62,015
Messages
673,494
Members
5,621
Latest member
naeemsafi
Back