Forum Moderators: not2easy
My problem as many of you know is getting that footer to stay at the bottom below the 983 pixel height main body where the 3 columns are. I tried an absolute position but it doesn't work if the text is too long or too short depending on how you define it. I also want it to stay centered in the browser as it is resized.
I have read many posts and they often give inadequate or unclear answers. Please if anyone can help me I would appreciate it.
<!-- HEADER STARTS HERE -->
<!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" />
<title>TITLE</title>
</head>
<style type="text/css">
#navi {
height: 40px; width: 100%;}
#navi a , #navi strong {
color: #FFFFFF;
font: 14px Arial,Helvetica,sans-serif;
text-decoration: none;
border: 1px solid #000000;
display: block;
width: 90px;
padding: 3px 3px;
margin: 0px;}
#navi a {
background: #00600;}
#navi a:hover {
font: 14px verdana, serif, bold; color: #FFFFFF; background: #009E00;}
body {
background:#006600;}
a:link {font-family: verdana; color: #FFFFFF;}
a:visited {font-family: verdana; color: #FBE694;}
h1 {color: #647A45;}
#omni {
position: float; clear:both;
height 92%; width 100%;}
#spacer {
position: absolute;margin-top: 670px; height: 32px; font-color: #00600; background: #006600;}
#header {
padding-left: 0px;
/*font-size: xx-large; */
color: #AFC082;background:#5BA05B;border-top: 2px solid #719207; border-bottom: 2px solid #719207;}
#center {
position: absolute; margin-left: -386px; margin-top: 56px;left: 50%;
width: 772px; height: 983px;
background:#FFFFFF;}
#leftcontent {
position: absolute; left: 0px; top: 0px; z-index: 3;
width: 128px; height: 983px;
font-family: arial; font-size: medium;
background: #5BA05B; border-right: 2px solid #B2C18C;}
#rightcontent {
position: absolute; left: 601px; top: 0px z-index: 2;
width: 170px; height: 983px;
font-size: small;
background: #FFFFFF; border-left: 2px solid #EF9615;}
#main {
margin-left: 144px; margin-right: 144px; z-index: 4;
width: 444px;
border-bottom:1px solid #8A9D64;}
#copyright {
/*position: absolute; margin-left: -386px; margin-top: 540px; left: 50%; */
width: 752px; padding: 8px;
color: #000000;background:#AFC082; border:1px solid #8A9D64;}
#time_date {
/*position: absolute;margin-left: -386px; margin-top: 600px; left: 50%; */
width: 752px; padding: 8px;
color: #000000; background:#AFC082; border:1px solid #8A9D64;}
#padding {
padding-left: 2px; padding-right: 2px;
font-size: x-small;}
#rightcontent h3 {
font-family: verdana; font-size: medium; text-align:center;
color: #EF9615; background: #FBE694; border-top: 1px solid #EF9615;border-bottom: 1px solid #EF9615;}
#leftcontent h3 {
font-family: verdana; font-size: small; text-align:center;
color: #EF9615; background: #FBE694; border-top: 1px solid #EF9615;border-bottom: 1px solid #EF9615;}
#main h1 {
font-family: verdana; font-size: medium; text-align:center;
color: #FFFFFF; background: #006600;}
</style>
<body>
<div id="omni">
<div id="header">
<img src="../../images/somebanner.jpg" width="250" height="250">
</div>
<div id="navi">
<center><table><tr>
<td><a href="http://website.com/index.php" title="Link">
Home</a></td>
<td><a href="http:/website.com/store.php" title="Link">Store</a></td>
<td><a href="http://website.com/ebay.php" title="Link">
ebay</a></td>
<td><a href="http://website.com/service.php" title="Link">
Services</a></td>
<td><a href="http://website.com/letter.php" title="Link">
Newsletters</a></td>
<td><a href="http://website.com/about.php" title="Link">
About</a></td>
<td><a href="http://website.com/forbidden.php" title="Link">
Beta Test!</a></td>
</tr></table></center>
</div>
<div id="center">
<div id="leftcontent">
</div>
<div id="rightcontent">
<p><h3>Online Store</h3></p>
<div id="padding">
The online store doesn't exist but it would be nice if it did.
</div>
<p><h3>Xbox</h3></p>
<div id="padding">
Some content.
</div>
<p><h3>Content goes here</h3></p>
<div id="padding">
Content goes here.
</div>
<p><h3>Content</h3></p>
<div id="padding">
Content goes here.
</div>
<p><h3>Site gets new colors</h3></p>
<div id="padding">
The website has gone to a much more subtle green/orange/off
white color scheme.
</div>
<!-- the div ending below is the center div -->
</div>
<!-- HEADER ENDS HERE -->
<!-- BODY STARTS HERE -->
<div id="main">
<h1>Some Content Title</h1>
<p>Some content.</p>
<p>More content.</p>
</div>
<div id="main">
<h1>Second Content Title.</h1>
<p>
<ul>
<li>Some content.</li>
<li>More content.</li>
<li>Even more content.</li>
<li>The last bit of content.</li>
</ul>
</p>
</div>
<!-- BODY ENDS HERE -->
<!-- FOOTER STARTS HERE -->
<div id="copyright">
Copyright © 2003, 2004, 2005 by some guy<br />
<font size=1>
Date Created: 01/01/2015
Last Updated: 01/28/2015
</font>
</div>
<div id="time_date">
<p>
Today is:
<em>
</em></p>
</div>
<div id="spacer"><font color="#006600">Goodbye!</font></div>
</body>
</html>
<!-- FOOTER ENDS HERE -->
[edited by: tedster at 12:44 am (utc) on June 18, 2005]
[edit reason] fix side scrolling [/edit]
