By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
440,262 Members | 1,161 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 440,262 IT Pros & Developers. It's quick & easy.

100% height and footer at bottom

P: 4
Hello All,

I have some problems making the columns 100% and forcing the footer at the bottom. Please refer to the code below and let me know a solution:

HTML CODE:[html]
<!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"><!-- InstanceBegin template="/Templates/templatetest.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="stylesheets/styleinnertest.css" type="text/css"/>

</head>
<body>
<div id="maincontainer">
<div id="topcontainer">
<div id="navcontainer">
<div id="nav">
</div>
</div>
</div>
<div id="videocontainer"></div>
<div class="container">
<div id="lefttcontainer"></div>
<div id="contentbox">
<div class="text"></div>
</div>
</div>
<div class="credits" id="footer">zx,c,c,zxc,zx,czx,c,zcz</div>
</div>
</body>
<html>[/html]

And this is the CSS CODE:
Expand|Select|Wrap|Line Numbers
  1. html, body{height:100%;} 
  2. html,body {margin:0;padding:0; background-color:#000;}
  3. #maincontainer
  4. {
  5.     background:url(../images/bg.gif);
  6.     height:100%;
  7.     width:975px;
  8.     margin-left:auto;
  9.     margin-right:auto;
  10.     position:relative;
  11.     z-index:4;
  12. }
  13. #topcontainer
  14. {
  15.     background:url(../images/navbg.gif) no-repeat;
  16.     position:relative;
  17.     width:968px;
  18.     height:116px;
  19.     padding:0;
  20.     left:3px;
  21.     top:-8px;
  22.     z-index:3;
  23. }
  24.  
  25. #navcontainer{
  26.     position: relative;
  27.     width: 968px;
  28.     height: 33px;
  29.     padding: 0;
  30.     margin: 0 0 10px 0;
  31.     z-index:2;
  32. }
  33. #videocontainer
  34. {
  35. background:#ffffff;
  36. position:relative;
  37. width:968px;
  38. height:238px;
  39. padding:0;
  40. left:3px;
  41. top:-4px;
  42. z-index:0;
  43. }
  44. .container
  45. {
  46. height:100%; /* IE6: treaded as min-height*/
  47. min-height:100%; /* real browsers */
  48. background:url(../images/bg.gif);
  49. padding-bottom:25px;
  50. }
  51.  
  52. #contentbox
  53. {
  54.     background:#FFFFFF;
  55.     position:relative;
  56.     float:left;
  57.     width:713px;
  58.     height:100%;
  59.     padding:0;
  60.     left:2px;
  61.     top:0px;
  62. }
  63. .text
  64. {
  65.     position:relative;
  66.     float:right;
  67.     width:700px;
  68.     height:auto;
  69.     padding:0;
  70.     top:270px;
  71.     right:3px;
  72.     font-family:Arial;
  73.     color:#666666;
  74.     font-size: 75%;
  75.     font-weight:normal;
  76. }
  77.  
  78. #lefttcontainer
  79. {
  80. background:url(../images/home_leftnavtop.gif) top no-repeat;
  81. background-color:#FFFFFF;
  82. position:relative;
  83. width:250px;
  84. height:100%;
  85. float:left;
  86. top:-3px;
  87. margin:3px;
  88. }
  89.  
  90. #footer
  91. {
  92.     background:#000000;
  93.     position:absolute;
  94.     bottom:0;
  95.     width:100%;
  96.     height:25px;   /* Height of the footer */
  97.     margin-left:auto;
  98.     margin-right:auto;
  99.     border-top: thin #333333 solid;
  100.     border-bottom: thin #333333 solid;
  101. }
Nov 15 '07 #1
Share this question for a faster answer!
Share on Google+

Post your reply

Sign in to post your reply or Sign up for a free account.