Why is div displaying below all other divs

So I have theis footer that I've been trying to force to stay at the bottom of the main content body. The class id is .foot and the div lives within the .bottom div. It has a -70px top margin. My thought was, that this would raise it above the bottom div. Instead it is diplaying below it and to the right. Can anyone think of why this is happening, and how to remedy it?


<!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>
        <link href="favicon.ico" type="image/png" rel="icon" />
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <!-- TemplateBeginEditable name="doctitle" --><title></title><!-- TemplateEndEditable --><!-- TemplateBeginEditable name="head" --><!-- TemplateEndEditable -->
        <link href="/stylesheets/style.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript" src="http://arnoldlehrerproperties.businesscatalyst.com/scripts/jquery.js"></script>
        <script type="text/javascript" src="http://arnoldlehrerproperties.businesscatalyst.com/scripts/jquery.slideshow.js"></script>
        <script language="javascript">
			$(document).ready(function (){
					$("#pikame").PikaChoose({transition:[1]});
				});
		</script>
    </head>
    <body>
        <div class="wrapper">
        <div id="header">
        <a href="http://apartments4yale.com"><img height="26" width="670" src="../images/ui/logo.gif" alt="Arnold Lehrer Properties" class="logo" /></a><a href="https://www.facebook.com/pages/Arnold-Lehrer-Properties/262839070409031" target="_blank"><img height="19" width="19" src="../images/ui/fb-ico.png" alt="Facebook" class="fbicon" /></a><a href="http://www.yelp.com/biz/yale-graduate-housing-new-haven-3" target="_blank"><img height="19" width="19" src="../images/ui/yelp-ico.png" alt="Yelp" class="yelpicon" /></a><a href="../contact.htm"><img height="19" width="26" src="../images/ui/email-ico.png" alt="Email" class="emailicon" /></a></div>
        <div id="top"></div>
        <div id="middle">
          <div id="menu">
            <ul>
              <li><a href="/available_units.htm"><img src="../images/ui/home-ico.png" alt="Available Units" class="ico_float" width="18" height="18" />Available Units</a></li>
              <li><a href="/1214_chapel.htm"><img src="../images/ui/home-ico.png" alt="Available Units" class="ico_float" width="18" height="18" />1214 Chapel Street</a></li>
              <li><a href="/2-8_lynwood.htm"><img src="../images/ui/home-ico.png" alt="Available Units" class="ico_float" width="18" height="18" />2-8 Lynwood Place</a></li>
              <li><a href="/contact.htm"><img src="../images/ui/contact-ico.png" alt="Available Units" class="ico_float" width="18" height="18" />Contact Us</a></li>
              <li><a href="/map.htm"><img src="../images/ui/map-ico.png" alt="Available Units" class="ico_float" width="18" height="18" />Map</a></li>
              <li><a href="/application.htm"><img src="../images/ui/application-ico.png" alt="Available Units" class="ico_float" width="18" height="18" />Apply Online</a></li>
              <br />
              <br />
              <li><a href="/testimonals.htm"><img src="../images/ui/home-ico.png" alt="Available Units" class="ico_float" width="18" height="18" />Testimonials</a></li>
            </ul>
         <div ice:editable="*">
           <p><br />
           &quot;Best landlord I ever had, period. Kind,  helpful, responsible, friendly. Would recommend to anyone who wants to take a  little of life's everyday stresses out of graduate school.&quot;  <em>Michael  Barker (Yale School of Drama, Management 2010)</em></p>
<p>&nbsp;</p>
            <p>"Long before you ever see the beautiful well-kept apartments of          Haddon Hall, you will have heard the rumor. Whispered among the          initiated, passed along as precious lore for a very few lucky students          each year, one name stands out -- 'Arnie!' they cry 'Arnie Lehrer --          simply the best landlord in all New Haven"<em> (The Yale Herald, March 25, 1994)</em></p>
<p> </p>
            <p>&nbsp;</p>
            <p> </p>
            <p>"When you're stranded at a New Haven airport because they don't have a          cashier for $ exchange, the last person you expect to&nbsp;surprise&nbsp;you          there is your new landlord! He made the transition SO MUCH easier. Best          landlord of my life by far!"<em>(Sharon Joyce)</em></p>
<p>&nbsp;</p>
            <p align="right"><a href="/testimonals.htm">Read More</a></p></div>
          </div>
          <div class="home_content"><!-- TemplateBeginEditable name="ContentArea" -->{tag_pagecontent}<!-- TemplateEndEditable --></div>
</div>
        <div id="bottom">   <div class="foot">
        <p><a href="/available_units.htm">Available Units</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="/1214_chapel.htm">1214 Chapel Street</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="/2-8_lynwood.htm">2-8 Lynwood Place</a><br />
        <a href="/contact.htm">Contact Us</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="/map.htm">Map</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="/application.htm">Apply Online</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="/testimonals.htm">Testimonials</a><br />
        <br />
        Arnold Lehrer Properties | Serving Yale with Quality Landlording </p>
        </div></div>
        
     
        
        </div>
    </body>
</html>

Open in new window

@charset "utf-8";
/* CSS Document */

body{
	margin:0px;
	background-image:url(../images/ui/bg.gif);
	background-repeat:repeat-x;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	color:#333;
}

h1 {
	color:#245592;
	font-size:16px;
}

h2 {
	color:#245592;
	font-size:14px;
}

h3 {
	color:#245592;
	font-size:12px;
}

hr {
	color: #ede8e2; 
	background-color: #ede8e2; 
	border: 1px dotted #245592; 
	border-style: none none dotted;
}

blockquote {
 	border:0;
 	width:auto;
 	float:left;
	margin:0 0 0 24px;
}

a:link, a:visited {
	color:#245592;
	text-decoration:none;
}


a:hover {
	text-decoration: none;
	color: #3177cd;
}

.wrapper {
	width:910px;
	margin:0 auto;
	display:block;
	text-align:left;
}

#header{
	background-image:url(../images/ui/header.png);
	width:910px;
	height:69px;
	display:block;
}

.logo{
	float:left;
	margin-left:15px;
	margin-top:30px;
	border: 0px;
}

.fbicon{
	float:right;
	margin-right:16px;
	margin-top:35px;
	border: 0px;
}

.yelpicon, .emailicon{
	float:right;
	margin-right:4px;
	margin-top:35px;
	border: 0px;
}

#top { 
	background-image:url(../images/ui/top.png);
	background-repeat:no-repeat;
	display: block;
	width:910px;
	height:8px;
	margin-top:8px;
	}

#middle {
	background-image:url(../images/ui/middle.png);
	display: block;
	width:910px;
	margin-right:8px;
	min-height:550px;
}

#bottom { 
	background-image:url(../images/ui/bottom.png);
	background-repeat:no-repeat;
	height:8px;	
	width: 910px;
	display: block;
	float: left;
}

.input{
	margin-top:8px;
	margin-top:8px;
}
.slideshow_container { 
	background-color:;
	width:674px;
	margin-top:-8px;
	height:426px;
	float:right;
}

.slideshow_container_bottom { 
	background-image:url(../images/slideshow/bottom.png);
	background-repeat:no-repeat;
	width:674px;
	height:16px;
	float:right;
}

.home_content {
	width:626px;
	float:right;
	padding:12px 24px 24px 24px;
}

*{
	list-style:none;
	margin:0px;
	padding:0px;
}
	
#menu {
	float:left;
	width:177px;
	margin-top:0px;
	margin-left:25px;
	margin-bottom:10px;
	font-size:11px;
	}
	
#menu li a {
	text-align:right;
	height:32px;
  	voice-family: "\"}\""; 
  	voice-family:inherit;
  	height:24px;
	text-decoration:none;
	font-size:12px;
	font-weight:bold;		
}	
	
#menu li a:link, #menu li a:visited {
	color:#245592;
	display:block;
	padding:8px 0 0 0px;
	border-bottom:dotted 1px #245592;
}
	
#menu li a:hover {
	color:#3177cd;
}
	
#menu li a:active { }

.ico_float { 
    float:right; 
	border:0px;
	padding:0px 0px 0px 7px;
}

.foot{	
	text-align: center;
	float:right;
	margin-top:-70px;
	margin-right:24px;
	width:626px;
	font-size:11px;
	}
	
input, textarea, .altButtonFormat, .altTextField{
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	color:#333;
}
	
.pikachoose {
	width:674px; 
}
.pika-stage {
	position: relative; 
	width: 674px; 
	height:426px;
}

.pika-stage .pika-aniwrap, .pika-stage .main-image{
	position: absolute;
	top: 0;
	left: 0;
}
.pika-stage .pika-aniwrap{
	width:100%;
}

.pika-stage .pika-ani
{
	position:relative;
	display: none;
	z-index:2;
	margin:0 auto;
}

.pika-stage img{
	border:0;
	height:100%;
}

.pika-stage .caption {
	position: absolute;
	background:#fff; 
	background: rgba(255,255,255,0.60);
	font-size: 11px;
	color: #000;
	padding: 10px;
	text-align:right; 
	bottom: 10px;
	left: 10px;
}

.pika-stage .caption p {
	padding: 0;
	margin: 0;
	line-height: 14px;
}

.pika-textnav, .pika-imgnav {
	display:none;
}

.pika-counter{
	position: absolute; 
	bottom: -20px;
	left:15px;
	font-size:11px;
	display:none;
}

#pikame{
	display:none;
}

.system-error-message, .system-message{
	background-color: #ede8e2; 
	border: 0px;
}

Open in new window

TinTodAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

user_nCommented:
try to remove
margin-top: -70px;
from
.foot{      
      text-align: center;
      float:right;
      margin-top:-70px;
      margin-right:24px;
      width:626px;
      font-size:11px;
      }
0
TinTodAuthor Commented:
I did. No change.
0
nap0leonCommented:
The live site looks good... and copying the code you posted locally it looks good.
I've checked in IE8, FF9, Chrome16, Safari 5.1.2 and Opera 11.62(?).

What browser are you using?
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

TinTodAuthor Commented:
Firefox.
0
TinTodAuthor Commented:
Here it is live. I must be missing something.
0
TinTodAuthor Commented:
0
darren-w-Commented:
Humm, you have a div with id = footer but this has no style associated with it. here is an example this will need to a little adjustment :

#footerwrapper {
height: 28px;
margin-bottom: 1px;
clear: both;
width: 994px;
margin-left: auto;
margin-right: auto;
}

also check the validation:

http://validator.w3.org/check?uri=http%3A%2F%2Fwww.apartments4yale.com%2F&charset=%28detect+automatically%29&doctype=Inline&group=0
0
TinTodAuthor Commented:
Got it, but with a bit of overlapping content on some pages. See the bottom: http://www.apartments4yale.com/application.htm
0
nap0leonCommented:
Hmm.. still looks good to me.
Perhaps darren-w sees the flaw?  Without seeing the error, I can't help.  Good luck!

footer looks OK in FF9
0
darren-w-Commented:
Viewing on chrome
0
TinTodAuthor Commented:
Fixed it. Thanks for your collective input. It's greatly appreciated.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.