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!