Footer on bottom

liunx

Guest
How do i have a footer div so it will go to the bottom of the screen, even if the site doesn't have enought content to scroll, but if it does have enoght to scroll then it will be on the very bottom after the content? Basicly have the footer so it is always on the bottom (only showing when the viewer is on the bottom of the page, not like a frame that always is showing.add clear: both;I don't quit get it... if you were trying to say add that to the style of the div... doesn't work.can i see your site.the website is <!-- m --><a class="postlink" href="http://www.freewebs.com/lakerrugby/">http://www.freewebs.com/lakerrugby/</a><!-- m --> its currently being made (my teacher wanted a website) well... i want to have it so the freewebs add is at the very bottom of the page (under the content)I'm not sure, but is this something like what you were after?

CSS
(I put #thebody in the CSS and deleted the style stuff from the HTML. I also added #footer in the CSS -- helps keep the footer under the content and at the bottom of the page.

As a note: I added 'px' to the numbers that originally had not measurement after them. If I hadn't, the page wouldn't've rendered properly in FF. It looks okay in IE; Netscape is odd-ish.)
body {
color : #3366ff;
background : #000000;
}

#thebody {
width: 80%;
height: 100%;
float: left;
}

#header {
width : 100%;
height: 60px;
border-bottom : 1px solid #3366ff;
margin-bottom: 20px;
}

#footer {
clear: both;
}

#nav {
width: 100px;
text-align: center;
float: left;
/*background: #00cc66;*/
margin-right: 20px;
}

img{
border: 0;
}

HTML
(From <div id="thebody" style="width: 80%; float: left;">, I deleted 'style="width: 80%; float: left"'.)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Colchester Rugby</title>
<link href=http://www.webdeveloper.com/forum/archive/index.php/"style.css" type="text/css" rel="stylesheet">
</head>

<script language="javascript" src=http://www.webdeveloper.com/forum/archive/index.php/"roll.js"></script>

<body>
<div id="header">

<img src=http://www.webdeveloper.com/forum/archive/index.php/"images/logo.jpg" alt="Laker Rugby" />
</div>
<div style="width: 100%;">
<div id="nav">
Menu:<br />
<img src=http://www.webdeveloper.com/forum/archive/index.php/"images/home3.gif" width=84 height=28 alt="Home" name="home"><br />


<!-- <a href=http://www.webdeveloper.com/forum/archive/index.php/"#"> onmouseover="javascript:roll(1,2)" onmouseout="javascript:roll(1,1)" </a> -->


<a href=http://www.webdeveloper.com/forum/archive/index.php/"#"><img src="images/his.gif" width=84 height=28 alt="History" name="his" onmouseover="javascript:roll(2,2)" onmouseout="javascript:roll(2,1)"></a><br />
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#"><img src="images/sche.gif" width=84 height=28 alt="Schedule" name="sche" onmouseover="javascript:roll(3,2)" onmouseout="javascript:roll(3,1)"></a><br />
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#"><img src="images/players.gif" width=84 height=28 alt="Players" name="players" onmouseover="javascript:roll(4,2)" onmouseout="javascript:roll(4,1)"></a><br />
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#"><img src="images/coaches.gif" width=84 height=28 alt="Coaches" name="coaches" onmouseover="javascript:roll(5,2)" onmouseout="javascript:roll(5,1)"></a><br />
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.cafepress.com/lakerrugby"><img src="images/store.gif" width=84 height=28 alt="Store" name="store" onmouseover="javascript:roll(6,2)" onmouseout="javascript:roll(6,1)"></a><br />
<a href=http://www.webdeveloper.com/forum/archive/index.php/"#"><img src="images/links.gif" width=84 height=28 alt="Links" name="links" onmouseover="javascript:roll(7,2)" onmouseout="javascript:roll(7,1)"></a><br />
</div>
<div id="thebody">
<h2>Coming Soon</h2>
<div style="border: 2px solid #3366ff; float: right; width: 300;">
<img src=http://www.webdeveloper.com/forum/archive/index.php/"emucorner.gif" width="300" /><br />
This is where the caption would go for
all the images you put on your site.
</div>

<p>
Laker Rugby Coming Soon!
</p>
</div>
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div id="footer"><!-- this will be the footer -->
<br />
<table width="80%" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td bgcolor="#EEEEEE" align="center">
<font size="2" color="#000000" face="verdana, arial">

This site is hosted for free by FreeWebs.com.
</font>
<font size=2 color="#0000FF">
Get your own<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://members.freewebs.com/" target="_blank">
Free Website</a> now!
</font>
</td>
</tr>

</table>

</div>
</body>
</htm>

Hope this helps some.

Take care,
Snitch.<!-- m --><a class="postlink" href="http://bonrouge.com/3c-hf-fluid-lc.php">http://bonrouge.com/3c-hf-fluid-lc.php</a><!-- m -->

<!-- m --><a class="postlink" href="http://bonrouge.com/br.php?page=faq#footeratbottomThanks">http://bonrouge.com/br.php?page=faq#foo ... ttomThanks</a><!-- m --> for all of your input!
 
Back
Top