Can't get footer to stay on bottom
newbie
Location: Rochester Institute of Technology
Posted: Sun, 2008-10-12 21:34
http://people.rit.edu/~ijs4097/rotc/
That's the webpage and i'm trying to have it duplicate this:
http://www.xs4all.nl/~peterned/examples/csslayout1.html
where the footer stays on the bottom but for some reason I can't get it to work on mine. I've got my code I believe matching up correctly on my page but it's difficult to say because I have a lot of div's.
they're both validated.
my html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>RIT Army ROTC - Tiger Battalion - Rochester, NY</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="index_files/default.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="site">
<div id="header">
<span>
<a href="http://www.rit.edu">RIT Homepage</a>
<a href="https://infocenter.rit.edu/">SIS - Information Access Center</a>
</span>
<a href="http://people.rit.edu/~ijs4097/rotc/">
<img src="index_files/6sep04v1.jpg" width="800" height="200" alt="header" />
</a>
</div>
<div id="bottom">
<div id="menu">
<ul>
<li>Navigate</li>
<li><a href="http://www.rit.edu/cast/armyrotc/">Home</a></li>
<li>Army ROTC at RIT</li>
<li><a href="http://people.rit.edu/~ijs4097/rotc/prospective_students.html">Prospective Students</a></li>
<li><a href="http://www.rit.edu/cast/armyrotc/scholar.php">Scholarship Information</a></li>
<li><a href="http://www.rit.edu/cast/armyrotc/bravo.php">Cadet Training</a></li>
<li><a href="http://www.rit.edu/cast/armyrotc/charlie.php">Extracurricular Activ.</a></li>
<li><a href="http://www.rit.edu/cast/armyrotc/info.php">Information Request</a></li>
<li>Tiger Battalion</li>
<li><a href="http://www.rit.edu/cast/armyrotc/cadre.php">Cadre and Staff</a></li>
<li><a href="http://www.rit.edu/cast/armyrotc/gallery/">Photo Gallery</a></li>
<li><a href="http://www.rit.edu/cast/armyrotc/rangerplatoon/">Ranger Platoon</a></li>
<li><a href="http://www.rit.edu/cast/armyrotc/rangerchallenge/">Ranger Challenge</a></li>
<li><a href="http://www.rit.edu/cast/armyrotc/alumni.php">Alumni</a></li>
<li>Links and Resources</li>
<li><a href="http://www.rit.edu/cast/armyrotc/delta.php">Cadet Resources</a></li>
<li><a href="http://www.army.mil/">Army.mil</a></li>
<li><a href="https://www.us.army.mil/">Army Knowlege Online</a></li>
</ul>
</div>
<div id="content_outer">
<div id="content_left">
<h1>Rochester Institute of Technology</h1>
<p>
Army ROTC is for scholars, athletes, and leaders. It takes dedication and hard
work to meet the standards of the Tiger Battalion. Think you have what it takes
to become a Tiger? Fill out an <a href="/info.php">info request form</a> today and get yourself started
on the right path.
</p>
<p>
Our program culminates in the commission of a cadet into the U.S. Army as a
2nd Lieutenant officer. Our battalion carries a proud tradition of commissioning
outstanding cadets into the Army every year. Become a part of the tradition; give
us a visit today.
</p>
<p>
Army ROTC builds strong leadership skills, and will help you develop good time
management. One of our goals is to enhance your decision-making abilities, which
enable you to prioritize your schoolwork, and eventually your professional work.
</p>
<center>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" title="navigation">
<param name="movie" value="slideshow.swf" />
<param name="quality" value="high" />
<embed src="slideshow.swf"></embed>
</object>
</center>
</div>
<div id="content_information">
<div id="information_newsletter" class="information_box">
<span class="information_header">Read the latest Newsletter!</span>
<form>
<select name="menu1">
<option>Select Issue...</option>
<option value="alumni/FALL 06 NEWSLETTER.pdf">Fall 2006</option>
<option value="alumni/Spring 06 Newsletter.pdf">Spring 2006</option>
</select>
<input name="Button1" value="Go" onclick="MM_jumpMenuGo('menu1','parent',0)" type="button" />
</form>
</div>
<div id="information_events" class="information_box">
<span class="information_header">News and Events</span>
August 25, 2007
<br />Freshman move in for ROTC
<br />August 26, 2007
<br />General move in for all Freshman
<br />September 3, 2007
<br />Start of Classes
<br />September 7, 2007
<br />First Training Lab
</div>
<div id="information_photo" class="information_box">
<span class="information_header">Photo Gallery</span>
<img src="index_files/gallery.jpg" alt="Chinook" />
<br />You can also check out the latest pics from the 2007 Spring Field Training Exercise
</div>
<div id="information_contact" class="information_box">
<span class="information_header">Contact Info</span>
Army ROTC
<br />16 Lomb Memorial Drive
<br />Rochester NY 14623
<br />Army ROTC Office: Building 10
<br />Phone Number: 585.475.2881
<br />Email:
</div>
</div>
</div>
</div>
<div id="footer">
Copyright © 2008 Tiger Battalion | <a href="http://www.rit.edu/cast/armyrotc/notice.php">Legal Notice</a>
</div>
</div>
</body></html>my CSS:
html,body {
background-color: #006600;
background-image: url('background.gif');
text-align: center;
height: 100%;
padding-top: 0px;
margin-top: 0px;
}
img {
border: none;
}
a {
font-weight: normal;
text-decoration: underline;
color: #000000;
}
div#site {
margin-left: auto;
margin-right: auto;
width: 800px;
min-height: 100%;
position: relative;
margin: 0 auto;
height: auto;
height: 100%;
min-height: 100%;
}
div#header {
margin-top: 0px;
padding-top: 0px;
padding-bottom: 12px;
background: black;
text-align: right;
}
div#header span a {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #FFFFFF;
padding-left: 10px;
padding-right: 10px;
margin-top: 0px;
padding-bottom: 0px;
text-decoration: none;
border: none;
}
div#header span a:hover {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #000000;
background-color: #999999;
margin: 0px;
padding-left: 10px;
padding-right: 10px;
text-decoration: none;
height: 100%;
padding-bottom: 2px;
}
div#bottom{
overflow: hidden;
margin-bottom: 0px;
padding-bottom: 0px;
}
div#menu {
text-align: left;
width: 170px;
background: #333333;
color: orange;
float: left;
height: 100%;
min-height: 100%;
position: relative;
}
div#menu ul {
margin: 0px;
padding: 0px;
display: block;
list-style-type: none;
}
div#menu ul li {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #FF6600;
text-decoration: none;
float: left;
background-color: #333333;
display: block;
width: 100%;
padding-top: 2px;
padding-bottom: 2px;
text-indent: 5pt;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #000000;
font-weight: bold;
}
div#menu ul li a {
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #FFFFFF;
text-decoration: none;
background-color: #333333;
display: block;
width: 100%;
padding-top: 2px;
padding-bottom: 2px;
text-indent: 5pt;
}
div#menu li a:hover {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: #000000;
text-decoration: none;
background-color: #999999;
margin: 0px;
padding: 15px;
display: block;
width: 100%;
padding-top: 2px;
padding-bottom: 2px;
text-indent: 5pt;
}
div#content {
float: left;
background: white;
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
text-align: justify;
color: #000000;
margin-left: 15px;
margin-right: 25px;
margin-bottom: 0px;
padding-bottom: 0px;
}
div#content_outer{
float: left;
width: 630px;
background: white;
padding-bottom: 0px;
margin-bottom: 0px;
padding-bottom: 5em;
position: relative;
}
div#content_left {
margin-left: 20px;
margin-top: 10px;
margin-right: 30px;
margin-bottom: 0px;
float: left;
width: 380px;
font-size: 11pt;
text-align: justify;
}
div#content_left h1{
font-size: 15pt;
}
div#content_information {
text-align: left;
float: right;
margin-right: 10px;
width: 188px;
margin-top: 30px;
}
.information_header {
display: block;
top: 0px;
right: 0px;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
background-color: #999999;
border: 1px solid #999999;
color: #000000;
font-weight: bold;
margin-bottom: 7px;
}
.information_box {
top: 0px;
right: 0px;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
width: 100%;
background-color: #CCCCCC;
border: 1px solid #999999;
margin-bottom: 10px;
}
div#information_contact {
font-size: 8pt;
}
div#footer {
margin-left: auto;
margin-right: auto;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
color: #000000;
background-color: #FFFFFF;
width: 100%;
padding-top: 10px;
padding-bottom: 5px;
margin-bottom: 5px;
clear: both;
position: absolute;
bottom: 0;
}
div#menu a {
color: white;
}
div#menu li {
margin-left: 0px;
padding: 0px;
}
div#title {
font-family: Arial, Helvetica, sans-serif;
font-size: 24px;
color: #333333;
font-weight: bold;
}
Leader
Posts: 752
Joined: 2007-06-10
Location: Adelaide, Oz
We need to introduce you to
Posted: Mon, 2008-10-13 00:35
We need to introduce you to Valeria - you can't find the footer and she can't get rid of it
Please read the footer thread in the How To forum and see if it helps.
Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again