Help with footer position

http://www.rubyonrails.biz/

If I add more text to the content area the footer doesn't adjust as it should. The new content just goes over it as shown.

Here is the CSS code.

/* GLOBAL LAYOUT
---------------------------------------------------------------------------------------------------- */

body
{
	background: #F5F0F1 url(images/bg.gif) repeat-x 0 0;
	border-top: 6px solid #FF0000;
	color: #000;
	font: 62.5% Verdana, Helvetica, Arial, Sans-Serif;
	margin: 0;
	padding: 10px 0 0 0;
}
p
{
	margin: 13px 0 0 0;
	padding: 0;
}

/* LINKS
---------------------------------------------------------------------------------------------------- */

a
{
	color: #FF0000;
}

/* PAGE STRUCTURE
---------------------------------------------------------------------------------------------------- */

#page
{
	background: url(images/pagebg.gif) repeat-y 0 0;
	margin: 0 auto;
	width: 800px;

}

/* HEADER
---------------------------------------------------------------------------------------------------- */

#header
{
	background: #eaeaea url(images/headerbg.gif) repeat-x 0 0;
	border-left: 2px solid #E4E4E4;
	border-right: 2px solid #E4E4E4;
	height: 97px;
	width: 796px;
}

/* SIDEBAR
---------------------------------------------------------------------------------------------------- */

#sidebar
{
	background: #fff;
	float: left;
	height: 360px;
	margin: 10px 0 0 3px;
	padding: 10px;
	width: 200px;
}
#sidebar h3
{
	background: url(images/sidebarbg.gif) no-repeat;
	color: #000;
	font-size: 8pt;
	height: 39px;
	margin: 0 0 0 0;
	padding: 8px;
	width: 197px;
}
#sidebar ul
{
	list-style: circle;
	margin: 0 0 0 25px;
	padding: 0;
}
#sidebar li
{
	font-size: 1.1em;
	margin: 0;
	padding: 0 0 10px 0;
}
#sidebar p
{
	margin: 0 0 20px 9px;
	padding: 0;
}
/*CONTENT
---------------------------------------------------------------------------------------------------- */

#content
{
	font-size: 1.3em;
	height: 360px;
	line-height: 1.5em;
	padding: 15px;
}
#content h3
{
	background: url(images/dots.gif) repeat-x 0 32px;
	font-size: 13pt;
	margin: 0;
	padding: 10px 0 5px 0;
}

/* FOOTER
---------------------------------------------------------------------------------------------------- */

#footer
{
	background: url(images/footerbg.gif) no-repeat 0 0;
	height: 44px;
	text-align: center;
	width: 800px;
}
p#footertext
{
	border-top: 1px solid #ccc;
	margin: 0 auto;
	padding: 2px 0 0 0;
	width: 250px;
}

/* NAVIGATION
---------------------------------------------------------------------------------------------------- */

#navigation
{
	float: right;
	width: 563px;
}
ul#nav
{
	border-bottom: 1px solid #FF0000;
	float: right;
	height: 53px;
	list-style: none;
	margin: 0;
	padding: 0 0 1px 0;
	width: 512px;
}
ul#nav li
{
	float: right;
	list-style: none;
	margin: 0 0 0 -1px;
	padding: 0;
}
ul#nav li a
{
	color: #FFF;
	display: block;
	height: 53px;
	margin: 0;
	padding: 0;
	text-indent: -5000px;
	width: 86px;
}
#button1 a
{
	background: url(images/button1.gif) no-repeat 0 0;
}
#button1 a:hover
{
	background: url(images/button1hover.gif) no-repeat 0 0;
}
#button2 a
{
	background: url(images/button2.gif) no-repeat 0 0;
}
#button2 a:hover
{
	background: url(images/button2hover.gif) no-repeat 0 0;
}
#button3 a
{
	background: url(images/button3.gif) no-repeat 0 0;
}
#button3 a:hover
{
	background: url(images/button3hover.gif) no-repeat 0 0;
}
#button4 a
{
	background: url(images/button4.gif) no-repeat 0 0;
}
#button4 a:hover
{
	background: url(images/button4hover.gif) no-repeat 0 0;
}
#button5 a
{
	background: url(images/button5.gif) no-repeat 0 0;
}
#button5 a:hover
{
	background: url(images/button5hover.gif) no-repeat 0 0;
}
#button6 a
{
	background: url(images/button6.gif) no-repeat 0 0;
}
#button6 a:hover
{
	background: url(images/button6hover.gif) no-repeat 0 0;
}
img.spacer
{
	float: left;
}

/* LOGO
---------------------------------------------------------------------------------------------------- */

h1#logo
{
	background: url(images/Logo.png) no-repeat 25px 20px;
	float: left;
	height: 97px;
	margin: 0;
	padding: 0;
	text-indent: -5000px;
	width: 231px;
}

PHP:

Thanks for any help.

I will post the code on the index page if you need me to.

 

I would try not to use the height attribute in your content and sidebar elements.

 

Didn't exactly work because one didn't correct the other. But it put me in the right direction. Thank you very much.

 

Try adding another style to your footer.

clear:both; should work.