Vertical scrolling and CSS

Hey im having a slight problem with one of my pages. My footer is not reaching the end of the page and if i try and move it, it keeps moving down. I want to control the height of the page with the footer at the bottom of the page. At the moment it is 3/4 down the page but page seems never ending.
this is my css
Thanks
F.



body {

margin: 0px;
padding: 0px;
background: #fcf5f5 url(images/img01.gif) repeat-x left top;
font: 13px Arial, Helvetica, sans-serif;
color: #660000;


}

h1, h2, h3 {
margin-top: 0px;


}

h1 {
font-size: 2.0em;


}

h2 {
font-size: 1.8em;


}

h3 {
font-size: 1.4em;


}

ol, ul {
margin-bottom: 1.8em;
line-height: 160%;
font-size: 0.99em;

}

a {
color: #a32626;
}

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

a img {
border: none;
}

/* Header */

#header {
width: 630px;
height: 100px;
margin: 0px auto;


}

#header a {
text-decoration: none;
color: #FFFFFF;
}

/* Logo */

#logo {
float: left;

}

#logo h1, #logo h3 , #logo p {
margin: 0px;
margin-left: -220px;
line-height: normal;
font-weight: medium;
color: #FFFFFF;
font: 40px Century Gothic, Helvetica, sans-serif;
}

#logo h1 {
padding: 25px 0px 0px 0px;
}
#logo h3{
margin-left: -20px;
font: 14px Century Gothic, Helvetica, sans-serif;
}





/* Menu */

#menu {
float: right;
margin-right: -220px;


}

#menu ul {
margin: 0px;
padding: 49px 20px 50px 0px;
list-style: none;
line-height: normal;
margin-left: -130px;



}

#menu li {
float: left;
margin: 0px 0px 0px 1px;
color: #000000;
}

#menu a {
display: block;
width: auto;
height: 28px;
padding: 12px 20px 0px 20px;
}

#menu a:hover {
text-decoration: underline;
}

#menu .active {
background: #a32626 url(images/img02.gif) no-repeat 0px 0px;
}

#menu .active a {
background: url(images/img02.gif) no-repeat 100% -40px;
}

/* Page */

#page {
width: 400px;
margin: 0px auto;
padding: 100px 0px;


}


#table {
font: 17px Arial, Helvetica, sans-serif;
float: center;
position: absolute;

}

/* This is the box in drag.html where you drag acrosss your pictures for construction */


#box123{

border-width: medium;
margin: 1px 1px 1px 1px;
padding: 12px 0px 12px 12px;
border-style: solid;
border-width: 1;
border-color: #c23939;
padding-top: 1em;
padding-bottom: 1em;
padding-right: 3em;
float: center;
width: 700px;
height: 375px;
margin-top: -10px;
margin-right: -300px;
margin-left: 400px;
position: absolute;
}
/* This is the box around the Admin login */
#box2 {
font-size: 1.5em;
padding-top: 1em;
padding-bottom: 1em;
padding-left: 3em;
padding-right: 3em;
float: center;
width: 250px;
height: 100px;
margin-top: -20px;
margin-left: 0px;
position: absolute;

}

/* This is the box around the enquirymain.html */

#box3 {
padding-top: 1em;
padding-bottom: 1em;
padding-left: 3em;
padding-right: 3em;
float: center;
width: 350px;
height: 250px;
margin-top: 35px;

}
/* This is the box around the enquirymain.html */

#alignimages {

float: center;
margin-left: 200px;

}
#alignheader {

float: center;
margin-right: 200px;

}

#box4 {
border-width: thin;
margin: 1px 1px 1px 1px;
padding: 12px 0px 12px 12px;
border-style: solid;
border-width: 1;
border-color: #c23939;
padding-top: 1em;
padding-bottom: 1em;
padding-left: 3em;
padding-right: 3em;
float: center;
width: 350px;
height: 358px;
margin-top: 35px;

}
#box5 {
border-width: thin;
margin: 1px 1px 1px 1px;
padding: 12px 0px 12px 12px;
border-style: solid;
border-width: 1;
border-color: #c23939;
padding-top: 1em;
padding-bottom: 1em;
padding-left: 3em;
padding-right: 3em;
float: right;
width: 180px;
height: 150px;
margin-top: -390px;

}

#box6 {
border-width: thin;
margin: 1px 1px 1px 1px;
padding: 12px 0px 12px 12px;
border-style: solid;
border-width: 1;
border-color: #c23939;
padding-top: 1em;
padding-bottom: 1em;
padding-left: 4em;
padding-right: 1.9em;
float: right;
width: 180px;
height: 160px;
margin-top: -190px;
margin-right: -280px;


}
/* This is the box in service.html */
#box7 {

padding-top: 1em;
padding-bottom: 1em;
padding-left: 4em;
padding-right: 1.9em;
float: center;
width: 550px;
height: 245px;
margin-top: -15px;
margin-right: 0px;
margin-bottom: -70px;
position: absolute;
margin-left: -90px;


}


#box36{

border-width: thin;
margin: 1px 1px 1px 1px;
padding: 12px 0px 12px 12px;
border-style: solid;
border-width: 1;
border-color: #c23939;
width: 800px;
height: 500px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: -50px;

float: left;
padding-left: 0em;
padding-top: 0em;
padding-bottom: 10.3em;
padding-right: 3.5em;
font: 17px Arial, Helvetica, sans-serif;

}

#box37{

border-width: thin;
margin: 1px 1px 1px 1px;
padding: 12px 0px 12px 12px;
border-style: solid;
border-width: 1;
border-color: #c23939;
width: 250px;
height: 85px;
margin-top: -288px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: -50px;

float: right;
padding-left: 0.8em;
padding-top: 0em;
padding-bottom: 7.3em;
padding-right: 1.0em;
font: 17px Arial, Helvetica, sans-serif;

}
/* Use to align delete.html */
#box38{


margin-top: 10px;
margin-right: -10px;
margin-bottom: -10px;
margin-left: 0px;
padding-left: 0em;
padding-top: 0em;
padding-bottom: 0.6em;
padding-right: 0.4em;
font: 16px Arial, Helvetica, sans-serif;
position: absolute;
}

/* Use to align update.html */
#box50{


margin-top: 30px;
margin-right: -10px;
margin-bottom: -10px;
margin-left: 0px;
padding-left: 0em;
padding-top: 0em;
padding-bottom: 0.6em;
padding-right: 0.4em;
font: 16px Arial, Helvetica, sans-serif;
position: absolute;
}

/* Use to align search box in Update1.php */

#box51{
margin-top: 100px;
margin-right: -10px;
margin-bottom: -10px;
margin-left: 0px;
padding-left: 0em;
padding-top: 0em;
padding-bottom: 0.6em;
padding-right: 0.4em;
position: absolute;
}

/* Use to align update boxes in update1.php */

#box52{
margin-top: -400px;
margin-right: -110px;
margin-bottom: -10px;
margin-left: 150px;
padding-left: 0em;
padding-top: 0em;
padding-bottom: 0.6em;
padding-right: 0.4em;
position: absolute;
}
/* Use to picture of bad garden in service.html */

#box52{
margin-top: -100px;
margin-right: -110px;
margin-bottom: -10px;
margin-left: 560px;
padding-left: 0em;
padding-top: 0em;
padding-bottom: 0.6em;
padding-right: 0.4em;
position: absolute;
}
/* Use to picture envelope in contact.html */

#box53{
margin-top: -50px;
margin-right: -110px;
margin-bottom: -10px;
margin-left: 175px;
padding-left: 0em;
padding-top: 0em;
padding-bottom: 0.6em;
padding-right: 0.4em;
position: absolute;
}
/* Use to picture i in aboutus.html */

#box54{
margin-top: -50px;
margin-right: -110px;
margin-bottom: -10px;
margin-left: 130px;
padding-left: 0em;
padding-top: 0em;
padding-bottom: 0.6em;
padding-right: 0.4em;
position: absolute;
}

/* Use to control search box in search.php */

#box55{
margin-top: 50px;
margin-right: -110px;
margin-bottom: -10px;
margin-left: 100px;
padding-left: 0em;
padding-top: 0em;
padding-bottom: 0.6em;
padding-right: 0.4em;
position: absolute;
}

/* Use to control heading in drag.html */

#box56{
margin-top: -690px;
margin-right: -110px;
margin-bottom: -10px;
margin-left: 490px;
padding-left: 0em;
padding-top: 0em;
padding-bottom: 0.6em;
padding-right: 0.4em;
position: absolute;
}

/* Use to control picture doors in select1.php */

#box57{
margin-top: -170px;
margin-right: -110px;
margin-bottom: -10px;
margin-left: 230px;
padding-left: 0em;
padding-top: 0em;
padding-bottom: 0.6em;
padding-right: 0.4em;
position: absolute;
}

/* Use to control picture conservatories in select1.php */

#box58{
margin-top: -170px;
margin-right: -110px;
margin-bottom: -10px;
margin-left: 470px;
padding-left: 0em;
padding-top: 0em;
padding-bottom: 0.6em;
padding-right: 0.4em;
position: absolute;
}


/* box that controls the position of the enlarged images in ph_nav.php pic handler */
#boxpic{


margin-top: -30px;
margin-right: 0px;
margin-bottom: -1px;
margin-left: -250px;
padding-left: 0em;
padding-top: 0em;
padding-bottom: 0.5em;
padding-right: 0.4em;
position: absolute;

}
/* box that controls the position of the enlarged images in ph_nav.php pic handler1 */
#boxpic1{


margin-top: -30px;
margin-right: 0px;
margin-bottom: -1px;
margin-left: -130px;
padding-left: 0em;
padding-top: 0em;
padding-bottom: 0.5em;
padding-right: 0.4em;
position: absolute;

}


/* position of the enlarged photos in ph_nav pic handler 2 */
#boxpic2{

margin-top: -30px;
margin-right: 0px;
margin-bottom: -1px;
margin-left: -150px;
padding-left: 0em;
padding-top: 0em;
padding-bottom: 0.5em;
padding-right: 0.4em;
position: absolute;

}


#box {
border-width: thin;
margin: 1px 1px 1px 1px;
padding: 12px 0px 12px 12px;
border-style: solid;
border-width: 1;
border-color: black;
padding-top: 40.0em;
padding-bottom: 10.3em;
padding-left: 10.3em;
padding-right: 15.3em;
float: right;
width: 500px;
height: 300px;
margin-top: -495px;

}


/* position of the "door" in select1.php */
#boxdoor{

margin-top: 170px;
margin-right: 0px;
margin-bottom: -1px;
margin-left: 0px;
padding-left: 0em;
padding-top: 0em;
padding-bottom: 0.5em;
padding-right: 0.4em;
position: absolute;

}
/* position of the "conservatory" in select1.php */
#boxcon{

margin-top: 170px;
margin-right: 0px;
margin-bottom: -1px;
margin-left: 0px;
padding-left: 0em;
padding-top: 0em;
padding-bottom: 0.5em;
padding-right: 0.4em;
position: absolute;

}
/* position of the "window" in select1.php */
#boxwin{

margin-top: 0px;
margin-right: 0px;
margin-bottom: -1px;
margin-left: 0px;
padding-left: 0em;
padding-top: 0em;
padding-bottom: 0.5em;
padding-right: 0.4em;
position: absolute;

}
/* position of the table in drag.html */
#boxdrag{

margin-top: -20px;
margin-right: 0px;
margin-bottom: -1px;
margin-left: 30px;
padding-left: 0em;
padding-top: 1.0em;
padding-bottom: 0.5em;
padding-right: 0.4em;
position: absolute;

}



/* Content */

#content {
float: center;
width: 800px;
height: 325px;
margin-top: -60px;
right: 150px;


}

.post {
margin: 0px 0px 30px 0px;
}

.post .title {
margin: 0px;
padding: 0px 0px 5px 0px;
border-bottom: 1px solid #c49090;
}

.post .entry {
}

.post .meta {
font-weight: bold;
}

.post .byline {
margin: 0px;
}




/* INDEX2.HTML */
#boxsearch {
width: 230px;
height: 300px;
padding: 0px 0px;
margin-top: -320px;
margin-right: -120px;
margin-bottom: 0px;
margin-left: -390px;
border-width: thin;
padding: 12px 0px 12px 12px;
border-style: solid;
border-width: 1;
border-color: #c23939;
padding-left: 2.0em;
padding-top: 0em;
padding-bottom: 0em;
padding-right: 0.8em;
font-size: 0.8em;
position:absolute;

}

/* INDEX2.HTML Option values links */
#boxsearch1 {
width: 230px;
height: 300px;
padding: 0px 0px;
margin-top: -260px;
margin-right: -120px;
margin-bottom: 0px;
margin-left: -435px;

padding-left: 2.0em;
padding-top: 0em;
padding-bottom: 0.6em;
padding-right: 0.4em;
font-size: 1.1em;
position:absolute;

}


/* ADMINISTRATION */
#boxsearch2 {
width: 230px;
height: 200px;
padding: 0px 0px;
margin-top: -320px;
margin-right: -120px;
margin-bottom: 0px;
margin-left: -390px;
border-width: thin;
padding: 12px 0px 12px 12px;
border-style: solid;
border-width: 1;
border-color: #c23939;
padding-left: 2.0em;
padding-top: 0em;
padding-bottom: 0em;
padding-right: 0.8em;
font-size: 0.8em;
position:absolute;

}

/* ADMINISTRATION Option values links */
#boxsearch3 {
width: 230px;
height: 100px;
padding: 0px 0px;
margin-top: -320px;
margin-right: -120px;
margin-bottom: 0px;
margin-left: -395px;

padding-left: 2.0em;
padding-top: 0em;
padding-bottom: 0.6em;
padding-right: 0.4em;
font-size: 1.1em;
position:absolute;

}





/* Footer */

#footer {
clear: both;
width: 1250px;
height: 30px;
margin: 0px auto 30px auto;
background: #c23939 url(images/img06.jpg) no-repeat left top;
color: #FFFFFF;
padding-bottom: 2.0em;
margin-top: -30px;



}

#footer p {
margin: 0px;
padding: 19px 0px 0px 0px;
text-align: center;
line-height: normal;
font-size: smaller;
}

#footer a {
color: #FFFFFF;
}


.error {
color: #CC0000;
font-size:1.2em;
padding-left: 10px;
text-align: left;
padding-right: 30px;
border-top: solid #CC0000 1px;
border-left: solid #CC0000 1px;
border-right: solid #CC0000 1px;
border-bottom: solid #CC0000 1px;
margin:0;
width:340px;
}
.error3 {
color: #CC0000;
font-size:0.9em;
padding-left: 5px;
text-align: left;
margin:0;
}
.error2{
color: #CC0000;
font-size:0.9em;

Post your complete html too or a link would be better!

i am still only developing at this time. it wont be going live for a while.




<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<!-- HOMEPAGE. -->
<head>
<meta name="generator" content="HTML Tidy for Linux (vers 6 November 2007), see www.w3.org">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Premier Windows and Doors. HOMEPAGE</title>
<link rel="stylesheet" type="text/css" href="style.css" media="screen">
<style type="text/css">
li.c2 {list-style: none}
span.c1 {font-size: 90%}
</style>
</head>
<body>
<div id="header">
<div id="logo">
<h1>Premier Windows and Doors</h1>
<h3>Carrigtwohill, Co.Cork</h3>
</div>
<!-- end #logo -->
<div id="menu">
<ul>
<li class="active"><a href="http://localhost/index2.html">Home</a></li>
<li><a href="http://localhost/aboutus.html">About Us</a></li>
<li><a href="http://localhost/order/shopcartindex.html">Products</a></li>
<li><a href="http://localhost/service.html">Services</a></li>
<li><a href="http://localhost/contact.html">Contact Us</a></li>
</ul>
</div>
<!-- end #menu --></div>
<!-- end #header -->
<div id="page">
<div id="content">
<h1 class="title">Welcome to our website</h1>
<hr>
<p><strong><span class="c1">We are pleased you have taken the time to visit our Web site. We hope you find it both educational and informative. Without a quality product backed by excellent customer service, a business will not realize great success. <img src="FYP/logo.jpg" title="REHAU is a global polymer processing company supplying products to the construction, automotive, and industry sectors. Products include PVC windows " width="140" height="75" align="left" alt="** PLEASE DESCRIBE THIS IMAGE **">Therefore, we set our standards of quality, value and customer service to the highest degree. We go the distance to ensure your experience with Premier Windows is a pleasurable one. From the initial purchase, installation and years later, you will find us ready and willing to serve you. Because we custom manufacture the majority of our products, we are able to ensure our stringent quality and craftsmanship requirements. It is our nationwide goal that each and every Premier Windows customer receives quality products backed by unsurpassed customer service and powerful guarantees.</span></strong></p>
<hr>
<a href="http://localhost/pic handler/index2.php"></a><img src="FYP/2.jpg" alt="Click Here for more types of Windows" width="125" height="75"> <a href="http://localhost/pic%20handler/index2.php"></a><img src="FYP/1.jpg" alt="Click Here for more types of Windows" width="125" height="75"> <a href="http://localhost/pic%20handler%202/index2.php"></a><img src="FYP/13.jpg" alt="Click Here for more types of Conservatories" width="125" height="75"> <a href="http://localhost/pic%20handler%202/index2.php"></a><img src="FYP/15.jpg" alt="Click Here for more types of Conservatories" width="125" height="75"> <a href="http://localhost/pic%20handler%202/index2.php"></a><img src="FYP/10.jpg" alt="Click Here for more types of Conservatories" width="125" height="75"> <a href="http://localhost/pic%20handler%201/index2.php"></a><img src="FYP/9.jpg" alt="Click Here for more types of Doors" width="70" height="90"> <a href="http://localhost/pic%20handler%201/index2.php"></a><img src="FYP/5.jpg" alt="Click Here for more types of Doors" width="81" height="90"></div>
<!-- end #content -->
<div id="boxsearch">
<h2>Search</h2>
<form method="post" action="search1.php"><input type="text" name="search" value=""> <input type="submit" value="Search"></form>
</div>
<div id="boxsearch1">
<ul>
<li><a href="http://localhost/select1.php">View Our Photo Gallery</a></li>
<li class="c2"></li>
<li><a href="http://localhost/order/shopcartindex.html">Retrieve an estimate for your home</a></li>
<li class="c2"></li>
<li><a href="http://localhost/service.html">Construct your own backgarden</a></li>
<li class="c2"></li>
<li><a href="http://localhost/enquirymain.html">Submit an enquiry form</a></li>
<li class="c2"></li>
<li><a href="http://localhost/map.html">View a map of our location</a></li>
<li class="c2"></li>
<li><a href="http://localhost/AdminLogin.php">Administration</a></li>
</ul>
</div>
<!-- end #sidebar --></div>
<!-- end #page -->
<div id="footer">
<p>Created by O'Mahony Web Design, Donoughmore, Co Cork Ireland<br>
Registered: 123456789</p>
</div>
<!-- end #footer -->
</body>
</html>

OK, I'd recommend you to check http://bonrouge.com/2c-hf-fluid.php to see how to make a good 2 column layout.

i changed my footer to this but had no affect
#footer {
clear : both;
width : 1250px;
height : 30px;
margin : 0 auto 30px auto;
background : #c23939 url(images/img06.jpg) no-repeat left top;
color : #ffffff;
padding-bottom : 2em;
margin-top : -30px;
bottom:0;

Hello fionam87,
Just starting at the top, I'm not sure why you make #header 630px wide and then negative margin everything outside of it. It might work better like if you'd decide on a width and make sure the stuff you put in it fits.

For getting your footer at the bottom of the page, have a look at this demo. http://nopeople.com/CSS/full-height-layout/index.html View the source to see how it's done.

Also, check the links about validation in my sig below.



...