Ok so I'm trying to modify the footer in a css template so the footer is fixed at the bottom and the main content would scroll. I know i could do it with and iframe or an include but i know it can be done by CSS.

I have tried for a few hours to get it to work following the instructions on this page. The template I'm trying to modify is Here.
I have a bit better organized CSS than the one that comes with the template added in the code box below

My attempts would put up the scroll bar on the side of the page even when the content didn't fill the page, i do know that there is a bunch extra in the CSS i don't need but i was going to get to that later. Any help would be great i'll put your credits in the CSS

Thanks

Code:
body {
	background-color: #FFFFFF;
	background-image: url(pagebg-2.png);
	background-repeat: repeat-x;
	margin: 0px;
	padding: 0px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000000;
}
.main {
	margin-right: 8%;
	margin-left: 8%;
}
.main .header {
	background-repeat: no-repeat;
	background-position: right top;
	height: 88px;
	margin-right: 6px;
	vertical-align: bottom;
	background-image: url(header2.png);
}
.main .header h1 {
	font-size: 18px;
	color: #000000;
	font-weight: bold;
	font-family: "Century Gothic", Arial;
	vertical-align: bottom;
	display: block;
	margin-top: 150px;
}
.main .header .headertext {
	font-size: 14px;
	font-weight: normal;
	font-family: Georgia, "Times New Roman", Times, serif;
	color: #FFFFFF;
	width: 60%;
	padding-top: 10px;
	line-height: 16px;
}
.main .headernormal {
	background-repeat: no-repeat;
	background-position: right top;
	height: 202px;
	margin-right: 6px;
	vertical-align: bottom;
}
.main .header2 {
	background-repeat: no-repeat;
	background-position: right top;
	height: 202px;
	margin-right: 6px;
	background-image: url(headerimage.png);
	vertical-align: bottom;
}
.main .header2 .headertext {
	font-size: 14px;
	font-weight: normal;
	font-family: Georgia, "Times New Roman", Times, serif;
	color: #FFFFFF;
	width: 60%;
	padding-top: 25px;
	line-height: 18px;
}
.main .header2 .headertext h2 {
	font-size: 24px;
	font-family: "Century Gothic", Arial;
	font-weight: bold;
	padding: 0px;
	line-height: 25px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 10px;
	margin-left: 0px;
	color: #F8F4EE;
	border-bottom-width: 1px;
	border-bottom-style: dashed;
	border-bottom-color: #F8F4EE;
}
.main .header2 .headertext h1 {
	font-family: "Century Gothic", Arial;
	color: #FFFFFF;
	font-size: 24px;
	border-bottom-width: 1px;
	border-bottom-style: dashed;
	border-bottom-color: #FFFFFF;
	display: block;
	padding-bottom: 3px;
	margin-bottom: 10px;
}
.main .tophead {
	height: 31px;
}
.main .tophead .logo {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 21px;
	text-transform: uppercase;
	display: block;
	color: #FFFFFF;
	height: 22px;
	margin-top: 3px;
	margin-bottom: 0px;
}
.main .tophead .logo a {
	color: #3399CC;
	text-decoration: none;
}
.main .tophead .logo span {
	text-transform: capitalize;
	color: #B0B0B0;
	font-weight: normal;
	font-size: 18px;
}
.main .tophead .logo a:hover {
	color: #FFFFFF;
	text-decoration: none;
}
.main .tophead .logo a:active, visited {
	color: #3399CC;
	text-decoration: none;
}
.main .belowheader {
	height: 36px;
	margin-top: 0px;
}
a:link {
	color: #3399CC;
	text-decoration: none;
}
a:visited {
	color: #3399CC;
	text-decoration: none;
}
a:hover {
	color: #FF9900;
	text-decoration: none;
}
a:active {
	color: #3399CC;
	text-decoration: none;
}
#menu {
	float:left;
	width:100%;
	font-size:93%;
	line-height:normal;
	margin-top: 6px;
}
#menu ul {
	margin:0;
	list-style:none;
	padding-top: 7px;
	padding-right: 10px;
	padding-bottom: 0;
	padding-left: 0px;
}
.main .contents {
	background-color: #FFFFFF;
	border-top-width: 10px;
	border-top-style: solid;
	border-top-color: #FFFFFF;
	margin-bottom: 20px;
}
.main .contents .right {
	float: right;
	width: 250px;
	margin-right: 5px;
	padding-top: 55px;
}
.main .contents .right .inprogress {
	font-size: 14px;
	font-weight: bold;
	color: #3399CC;
	padding-top: 2px;
	padding-right: 3px;
	padding-bottom: 3px;
	padding-left: 8px;
	font-family: Arial, Helvetica, sans-serif;
	background-color: #F7EBD7;
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #DAD0BE;
}
.main .contents .right .inportfolio {
	margin-top: 5px;
	margin-bottom: 3px;
}
.main .contents .right .inportfolio img {
	margin-left: 8px;
	border: 3px solid #FFFFFF;
}
.main .contents .right .rightbox {
	background-image: url(rightbox2.png);
	background-repeat: repeat-y;
	background-position: center;
	margin-bottom: 15px;
}
.main .contents .right .rightbox .rightboxhead {
	background-image: url(rightbox-1.png);
	background-repeat: no-repeat;
	height: 39px;
	width: 242px;
	margin-right: auto;
	margin-left: auto;
	padding-top: 5px;
}
.main .contents .right .rightbox .rightboxhead h2 {
	font-size: 14px;
	color: #0099CC;
	display: block;
	margin-top: 10px;
	margin-right: 10px;
	margin-left: 10px;
	text-transform: uppercase;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #F6F0E8;
	font-family: "Century Gothic", Arial;
}
.main .contents .right .rightbox .rightboxbottom {
	background-image: url(rightbox3.png);
	height: 23px;
	width: 242px;
	margin-right: auto;
	margin-left: auto;
	background-repeat: no-repeat;
	background-position: center;
}
.main .contents .right .rightbox .rightboxcontent {
	width: 230px;
	margin-right: auto;
	margin-left: auto;
	line-height: 18px;
	font-size: 12px;
	font-style: italic;
	text-align: left;
}
.main .contents .right .rightbox .rightboxcontent a {
	text-decoration: none;
	color: #0099CC;
}
.main .contents .right .rightbox .rightboxcontent a:link {
	text-decoration: none;
	color: #0099CC;
}
.main .contents .right .rightbox .rightboxcontent a:hover {
	text-decoration: none;
	color: #0099CC;
}
.main .contents .right .rightbox .rightboxcontent a:active {
	text-decoration: none;
	color: #0099CC;
}
.main .contents .right .rightbox .rightboxcontent img {
	float: left;
	margin-right: 5px;
	border: 2px solid #EADECB;
	margin-left: 5px;
}
.main .contents .right .rightbox .rightboxcontent ul {
	font-style: normal;
	text-decoration: none;
	list-style-image: none;
	list-style-type: none;
	display: block;
	margin: 5px;
	padding: 2px;
}
.main .contents .right .rightbox .rightboxcontent li {
	display: block;
	margin-bottom: 5px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #DED0B8;
	margin-top: 0px;
	margin-right: 0px;
	margin-left: 0px;
}
.main .contents .left {
	margin-right: 260px;
	background-color: #FFFFFF;
	padding-top: 10px;
	padding-right: 15px;
	text-align: justify;
	line-height: 18px;
}
.main .contents .left h2 {
	font-family: "Century Gothic", Arial;
	font-size: 22px;
	font-weight: normal;
	line-height: 28px;
	color: #3399CC;
	padding-top: 5px;
	padding-right: 5px;
	padding-bottom: 5px;
	margin-top: 5px;
	margin-right: 5px;
	margin-bottom: 5px;
}
.main .contents .left p {
	line-height: 18px;
	color: #333333;
}
.main .contents .left input {
	color: #000000;
	background-color: #FCEED6;
	border: 1px solid #666666;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	padding: 3px;
	font-weight: bold;
	width: 350px;
}
.main .contents .left textarea {
	background-color: #FCEED6;
	border: 1px solid #666666;
	font-size: 16px;
	color: #000000;
	padding: 3px;
	width: 350px;
	font-weight: bold;
}
.main .contents .left .submitbutton {
	background-color: #FF9966;
	background-image: url(menu02.png);
	background-repeat: no-repeat;
	display: block;
	height: 24px;
	width: 102px;
	border: 1px solid #666666;
	font-size: 12px;
	padding: 0px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}
.main .contents .left #error {
	background-image: url(smiley-error.png);
	background-repeat: no-repeat;
	background-position: 5px center;
	padding-left: 60px;
}
.main .contents .left #ok {
	background-image: url(smiley-success.png);
	background-repeat: no-repeat;
	background-position: 5px center;
	padding-left: 60px;
}
#top .contents .left img {
	float: left;
	margin-right: 10px;
	margin-bottom: 5px;
}
#top .contents .left #contactbox {
	background-color: #FFFAF0;
	padding: 5px;
	border: 1px solid #DED0B8;
}
#top .contents .left #contactbox form {
	padding: 0px;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	width: 370px;
}
#top .contents .right .rightbox .rightboxcontent #feeds {
	padding: 5px;
}
#top .contents .right .rightbox .rightboxcontent #feeds a {
	color: #0099CC;
	background-image: url(feed-icon.png);
	background-repeat: no-repeat;
	display: block;
	padding-left: 20px;
	background-position: left center;
}
#top .contents .right .rightbox .rightboxcontent #feeds img {
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
}
#menu li {
	display:inline;
	margin:0;
	padding:0;
}
#menu a {
	float:left;
	background:url("tableftB.gif") no-repeat left top;
	margin:0;
	padding:0 0 0 4px;
	text-decoration:none;
}
#menu a span {
	float:left;
	display:block;
	background:url("tabrightB.gif") no-repeat right top;
	padding:5px 15px 4px 6px;
	color:#666666;
	text-decoration: none;
}
#menu a span {
	float:none;
}
#menu a:hover span {
	color:#000;
}
#menu a:hover {
	background-position:0% -42px;
}
#menu a:hover span {
	background-position:100% -42px;
}
#menu a:active {
	background-position:0% -42px;
}
#menu a:active span {
	color:#000;
}
#menu a:active span {
	background-position:100% -42px;
}
#menu .active {
	background-position:0% -42px;
}
#menu .active span {
	color:#000;
}
#menu .active span {
	background-position:100% -42px;
}
.posted {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	text-decoration: none;
	background-color: #F9EDD8;
	margin-bottom: 15px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #DFCCB0;
	margin-top: 15px;
	padding-right: 5px;
	padding-left: 5px;
}
blockquote {
	background-color: #FFF8EA;
	margin-top: 10px;
	margin-right: 20px;
	margin-bottom: 10px;
	margin-left: 20px;
	padding: 10px;
	border: 1px solid #F1E3CB;
	color: #0099CC;
	font-weight: normal;
	text-decoration: none;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-style: italic;
}
.footer {
	background-color: #A3A3A3;
	background-image: url(footerbg.png);
	background-repeat: repeat-x;
	padding-bottom: 15px;
	height: 165px;
}
.footer .footerinner {
	margin-top: 25px;
	margin-right: 8%;
	margin-left: 8%;
	padding-top: 25px;
}
.footerinner h3 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #ffffff;
	text-decoration: none;
	display: block;
	padding-top: 2px;
	padding-right: 5px;
	padding-bottom: 2px;
	padding-left: 5px;
	margin: 0px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #666666;
}
#bottom .footerinner a:hover {
	color: #000000;
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #FFFF99;
	display: block;
	padding-left: 3px;
	background-color: #E7D9C3;
	margin-top: 2px;
}
#bottom .footerinner .fromgallery {
	width: 33%;
	float: left;
}
#bottom .footerinner .fromportfolio {
	width: 32%;
	margin-right: 8px;
	margin-left: 8px;
	float: left;
}
#bottom .footerinner .misc {
	width: 32%;
	float: left;
}
.footerbottom {
	background-color: #666666;
	height: 45px;
	padding-top: 5px;
	padding-right: 10px;
	padding-bottom: 5px;
	padding-left: 10px;
	border-top-width: 2px;
	border-top-style: solid;
	border-top-color: #000000;
	vertical-align: middle;
	color: #CCCCCC;
}
.footerbottom a {
	color: #FFFFFF;
}
.footerbottom a:hover {
	color: #FFFF66;
}
.footerbottom a:active {
	color: #FFFFFF;
}
.footerbottom a:visited {
	color: #FFFFFF;
}
.footerbottom .footerright .textbutton {
	color: #FFCC66;
	background-color: #999999;
	display: block;
	padding: 2px;
	border: 1px solid #333333;
	width: 90px;
	text-align: center;
	float: right;
}
.footerbottom .footerright {
	width: 45%;
	margin-left: 50%;
	margin-top: 10px;
	text-align: right;
}
.footerbottom .footerleft {
	width: 45%;
	margin-right: 35px;
	float: left;
	margin-top: 10px;
}