Need help footor won't go down with the content!

HTML & CSS
1

hi,

i’m new to this forum and kinda new to making websites so i’m kind of a nuwb and i need help with my footer.

it won’t stay down, if i add more content( so the page will get largers ) it overlaps my footer it doesn’t move doen.

please help me here is my HTML and CSS it probebly be a bit confusing because im not good in it yet.


<html>

<head>

<title>Home</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="description" content="FW MX CSS Layer">
<link rel="stylesheet" type="text/css" href="main.css">

<style type="text/css">
<!--
body {
	background-image: url(images/bg.gif);
}
.style9 {font-size: 10}
.style10 {
	font-size: 12px;
	font-family: Tahoma;
}

-->
</style>

<script src="cufon-yui.js" type="text/javascript"></script>
		<script src="Yanone_Kaffeesatz_Light_300.font.js" type="text/javascript"></script>
		<script type="text/javascript">
			Cufon.replace('h1'); // Works without a selector engine
			Cufon.replace('#sub1'); // Requires a selector engine for IE 6-7, see above
			Cufon.replace('i');
		</script>
		
<script type="text/javascript" src="stmenu.js"></script></head>

<body bgcolor="#ffffff">
<a name="top"></a>
<div id="maincontainer">



<div id="language" >
<div class="languagepictures">
  <div align="left" > 
   <a href="http://www.england.com"><img src="language/england.gif" width="48" height="14" border="0"></a>
   <a href="http://www.greece.com"><img src="language/greece.gif" width="48" height="14" border="0"></a>
   <a href="http://www.spane.com"><img src="language/spane.gif" width="48" height="14" border="0"></a>
   <a href="http://www.deutsland.com"><img src="language/deutsland.gif" width="48" height="14" border="0"></a> </div>
    </div>
</div>

<div id="header" ><img name="header_img" src="images/header.gif" width="722" height="339" border="0"></div>

<div id="logo" ><img name="logo_img" src="images/logo.gif" width="214" height="311" border="0"></div>

<div id="menu" >

<a href="http://www.dhtml-menu-builder.com"  style="display:none;visibility:hidden;">Javascript DHTML Drop Down Menu Powered by dhtml-menu-builder.com</a>
<script type="text/javascript">
<!--
stm_bm(["menu6f04",900,"","blank.gif",0,"","",0,0,250,0,1000,1,0,0,"","",0,0,1,2,"default","hand","",1,25],this);
stm_bp("p0",[1,4,0,0,5,3,0,0,100,"",-2,"",-2,50,0,0,"#999999","#E6EFF9","",3,0,0,"#000000"]);
stm_ai("p0i0",[0,"       Home","","",-1,-1,0,"LaPerla.html","_self","","","","",0,0,0,"","",0,0,0,0,1,"#E4F2F9",0,"#35B6DB",0,"","",3,3,0,0,"#E6EFF9","#000000","#002A3F","#FFFFFF","14px Tahoma","14px Tahoma",0,0,"","","","",0,0,0]);
stm_aix("p0i1","p0i0",[0,"       About","","",-1,-1,0,"about.html"]);
stm_aix("p0i2","p0i0",[0,"       Accomodations            ","","",-1,-1,0,"accomodations.html"]);
stm_aix("p0i3","p0i0",[0,"       Offers","","",-1,-1,0,"offers.html"]);
stm_aix("p0i4","p0i3",[0,"       Book online","","",-1,-1,0,"bookonline.html"]);
stm_aix("p0i5","p0i3",[0,"       Facilities","","",-1,-1,0,"facilities.html"]);
stm_aix("p0i6","p0i3",[0,"       Gallary","","",-1,-1,0,"gallary.html"]);
stm_aix("p0i7","p0i3",[0,"       Contact","","",-1,-1,0,"contact.html"]);
stm_ep();
stm_em();
//-->
</script>

</div>

<div id="mainhome" > 

<div class="content">
<div  class="contentHeader" >
 <i>Welcome to LaPerla Hotel </i>

 </div>
 <div  class="contentText" >


 </div>

</div>
</div>


<div id="rightcolumn" >
<div  class="RightColumnHeader" >
 <i>Book Online </i>
 </div> 
 <div  class="contentText" > </div>
 <div  class="RightColumnText" >
  </div>  
</div>



<div id="footer" >
<div id="facebook" ><a href="http://www.facebook.com"><img name="facebook_img" src="images/facebook.gif" width="22" height="22" border="0"></a></div>

<div id="twitter" ><a href="http://www.twitter.com"><img name="twitter_img" src="images/twitter.gif" width="22" height="22" border="0"></a></div>

<div align="left" id="followus" >
<font color="#FFFFFF">
Follow Us</font></div>

<div align="left" id="sendtofriend" >
 <a href="disclaimer.html"><font color="#FFFFFF">Disclaimer</font></a> 
 <a href="print.html"><font color="#FFFFFF">Print this page</font></a> 
 <a href="sendtofriend.html"><font color="#FFFFFF">Send to friend </font></a> </div>

<div id="topofpage" >
<a href="#"><font color="#FFFFFF">Back to top of page^</font></a></div>

<div id="hrline" >
<img name="hr_line" src="images/hr_line.gif" width="880" height="3" border="0"></div>

<div  align="left" id="copyright">
<font color="#FFFFFF">
Copyright 2010 La Perla Hotel, Greece</font></div>

<div id="madeby" >
<font color="#FFFFFF">
Created by: Symmetria web solutions</font></div>

</div>

<script type="text/javascript"> Cufon.now(); </script>
</div>
</body>
</html>

and CSS


/* CSS Document */

body 
{ 

  margin: 0; 
  padding: 0; 
  text-align: center; 
  background-image: url(images/bg.gif);
} 
#maincontainer
{
	position:relative;
	margin: 0 auto;
	width: 937px;
	z-index:30;
	background-color: #99CCCC;
	border-top: 9px solid;
	border-color:#002A3F;
} 

#language
{
position:absolute; 
left:0px; 
top:0px;
width:214px; 
height:28px;
z-index:2; 
visibility:visible;
background-color:#FFFFFF;
}

#header 
{
position:absolute; 
left:214px; 
top:0px;
width:722px; 
height:339px;
z-index:3; 
visibility:visible;
}

#logo 
{
position:absolute; 
left:0px; 
top:27px;
width:214px; 
height:311px;
z-index:4; 
visibility:visible;
}

#menu 
{
position:absolute; 
left:0px; 
top:349px;
width:214px; 
height:480px;
z-index:5; 
visibility:visible;
background-color:#E4F2F9;
}

#mainhome
{
	position:absolute;
	left:218px;
	top:351px;
	width:425px;
	height:478px;
	z-index:6;
	visibility:visible;
	border-right:solid
	#E4F2F9
}

#mainaccomodation
{
	position:absolute;
	left:218px;
	top:351px;
	width:425px;
	height:478px;
	z-index:6;
	visibility:visible;
	border-right:solid
	#E4F2F9
}



.content 
{
width:460px; 

}

#rightcolumn
{
position:absolute; 
left:680px; 
top:351px;
width:257px; 
height:478px;
z-index:7; 
visibility:visible;
}

.rightcolumntop
{
left:680px; 
top:351px;
width:257px; 
height:281px;
z-index:7; 
visibility:visible;
border-bottom:solid;
border-bottom-color:#E4F2F9;
}

.rightcolumnfooter
{
left:680px; 
top:645px;
width:257px; 
height:185px;
z-index:7; 
visibility:visible;
}

#footer 
{
position:absolute; 
left:2px; 
top:838px;
width:936px; 
height:213px;
z-index:9; 
visibility:visible;
}

.contentHeader 
{
	position:relative;
	left:12px;
	width:448px;
	height:38px;
	z-index:1;
	background-color:#E4F2F9;
	float:left;
	font-size: x-large;
	text-align: left;
}

.contentText
{
	position:relative;
	left:12px;
	width:425px;
	z-index:1;
	text-align: left;
}

.RightColumnHeader 
{
	position:relative;
	left:12px;
	width:235px;
	height:38px;
	z-index:1;
	background-color:#E4F2F9;
	float:left;
	font-size: x-large;
	text-align: left;	
	margin-left: 10px;
}

.RightColumnText
{
	position:relative;
	width:215px;
	z-index:1;
	text-align: left;
	left:15px;
}

.subMenuAccomodation  
{
	position:relative;
	left:12px;
	width:448px;
	top:8px;
	height:20px;
	z-index:1;
	visibility:visible;
	background-color:#E4F2F9;
	float:left;
	font-size: x-large;
}

.languagepictures 
{
position:absolute; 
vertical-align:middle; 
left: 3px; 
top: 5px; 
width: 212px;
}

#facebook 
{
position:absolute; 
left:100px; 
top:36px;
width:22px; 
height:22px;
z-index:3; 
visibility:visible;
}

#twitter 
{
position:absolute; 
left:135px; 
top:36px;
width:22px; 
height:22px;
z-index:5; 
visibility:visible;
}

#followus 
{
position:absolute; 
left:43px; 
top:46px;
width:51px; 
height:9px;
z-index:8; 
visibility:visible;
font:Tahoma;
font-size:10px;
}

#sendtofriend 
{
	position:absolute;
	left:189px;
	top:44px;
	width:231px;
	height:9px;
	z-index:10;
	visibility:visible;
	font-size:10px;
	font-family:Tahoma;
}

#topofpage 
{
position:absolute; 
left:814px; 
top:45px;
width:107px; 
height:9px;
z-index:12; 
visibility:visible;
font-family:Tahoma;
font-size:10px;
}

#hrline 
{
position:absolute; 
left:41px; 
top:74px;
width:880px; 
height:3px;
z-index:20; 
visibility:visible;
}

#copyright 
{
position:absolute; 
left:41px; 
top:85px;
width:194px; 
height:11px;
z-index:22; 
visibility:visible;
font-family:Tahoma;
font-size:10px;
}

#madeby 
{
position:absolute; 
left:737px; 
top:85px;
width:184px; 
height:11px;
z-index:24; 
visibility:visible;
font-family:Tahoma;
font-size:10px;
}

TY in advance!

2

It still doesn’t work i’ve tried float, fixed , i even changed every single height to 100% and tried Opera but i can’t get it to stay down i dont know what to do next.

3

This forum is run by people who contribute in their free time. You could PM them if you wish, however them actually helping is only if they want to :). There’s just too much to fix in your code for me to fix without doing a complete recode. Jason seems to like doing recodes though :).

4

Oke, could u ask them or what should i do so i can ask them?

thank u for all you’re help.

5

A common mistake :). You have absolutely positioned almost everything on that page, and as a result noone knows where anything is :).

The footer doesn’t even recognize the absolutely positioned elements are there. YOu need to rework your CSS to use floats instead of absolute positioning, and then the footer won’t be overlapped (if it does, that’s entirely a new issue and we will resolve that upon getting it :))

6

No, you’re not understanding me mate :). Instead of absolute positioning, use floats to get them to where you want (if you even need to float)

Never stick 100% height on every element because then they will be restricted to that height (assuming that a parent even has a fixed height because the html and body don’t have height:100%)

Your CSS seems to need a complete recode by the looks of it. I don’t have time but perhaps Jason or Paul do.