http://www.fmlbadges.com/mantest/index.html

 

I'm currently trying to build the site linked to above but I have a problem with the way the footer works.

 

I want to make it so that if the resolution is longer than the site, the footer extends (in line with the main content of the site) with the colour #101010 to the bottom of the page.

 

How can I achieve that with the code I already have?

 

Thanks in advance.

You can either A) Google "sticky footer" and use what you find to create a dynamic footer or Set a min height for your content div.

Thanks for your response. I'm still having a little trouble though.

 

I've input the sticky footer css and html, but I'm still having a little trouble. The footer stops at the end of height (specified in 'center') but if I remove it, the footer just sticks at the top of the browser. Any ideas to fix this?

 

body {
margin: 0px;
padding: 0px;
background: url(images/bg.jpg);
background-position: top center;
text-align: center;

}

#center {
position: relative;
width: 750px;
height: 848px;
margin-left: auto;
margin-right: auto;
}

#topbar {
position: absolute;
left: 3px;
top: 0px;
width: 743px;
height: 5px;
}

#logo {
position: absolute;
left: 6px;
top: 5px;
width: 307px;
height: 120px;
}

#homebutton ul {
width: 109px; 
height: 120px; 
position: absolute;
top: 5px; 
left: 313px; 
background: url(images/home.jpg) no-repeat 0 0;
list-style: none;
margin: 0; padding: 0;
}

#homebutton li {
display: inline;
}

#homebutton li a:link, #homebutton li a:visited {
border: none;
width: 109px; 
height: 120px; 
display: block; 
position: absolute; 
top: 0; 
text-indent: -7000px;
outline: none;
}

#homebutton li.home a:hover {
background: url(images/home.jpg) no-repeat 0 -120px; 
}

#servicesbutton ul {
width: 107px; 
height: 120px; 
position: absolute;
top: 5px; 
left: 422px; 
background: url(images/service.jpg) no-repeat 0 0;
list-style: none;
margin: 0; padding: 0;
}

#servicesbutton li {
display: inline;
}

#servicesbutton li a:link, #servicesbutton li a:visited {
border: none;
width: 107px; 
height: 120px; 
display: block; 
position: absolute; 
top: 0; 
text-indent: -7000px;
outline: none;
}

#servicesbutton li.services a:hover {
background: url(images/service.jpg) no-repeat 0 -120px; 
}

#pricesbutton ul {
width: 108px; 
height: 120px; 
position: absolute;
top: 5px; 
left: 529px; 
background: url(images/prices.jpg) no-repeat 0 0;
list-style: none;
margin: 0; padding: 0;
}

#pricesbutton li {
display: inline;
}

#pricesbutton li a:link, #pricesbutton li a:visited {
border: none;
width: 108px; 
height: 120px; 
display: block; 
position: absolute; 
top: 0; 
text-indent: -7000px;
outline: none;
}

#pricesbutton li.prices a:hover {
background: url(images/prices.jpg) no-repeat 0 -120px; 
}

#contactbutton ul {
width: 107px; 
height: 120px; 
position: absolute;
top: 5px; 
left: 637px; 
background: url(images/contact.jpg) no-repeat 0 0;
list-style: none;
margin: 0; padding: 0;
}

#contactbutton li {
display: inline;
}

#contactbutton li a:link, #contactbutton li a:visited {
border: none;
width: 107px; 
height: 120px; 
display: block; 
position: absolute; 
top: 0; 
text-indent: -7000px;
outline: none;
}

#contactbutton li.contact a:hover {
background: url(images/contact.jpg) no-repeat 0 -120px; 
}

#welcometext {
position: absolute;
left: 13px;
top: 171px;
width: 339px;
height: 221px;
}

#topbanner {
position: absolute;
left: 361px;
top: 147px;
width: 376px;
height: 247px;
}

#leftbanner {
position: absolute;
left: 13px;
top: 416px;
width: 238px;
height: 349px;
}

#middlebanner {
position: absolute;
left: 257px;
top: 416px;
width: 234px;
height: 349px;
}

#rightbanner {
position: absolute;
left: 497px;
top: 416px;
width: 240px;
height: 349px;
}

html, body, #wrap {height: 100%;}

body > #wrap {height: auto; min-height: 100%;}

#main {padding-bottom: 62px;}  /* must be same height as the footer */

#footer {
position: relative;
margin-top: -62px; /* negative value of footer height */
height: 62px;
clear:both;} 

/* CLEAR FIX*/
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.clearfix {
display: inline-block;
}

/* Hides from IE-mac \*/
* html .clearfix {
height: 1%;
}

.clearfix {
display: block;
}
/* End hide from IE-mac */

.Normal-P0 {
margin: 0.0px 0.0px 0.0px 0.0px;
text-align: justify;
font-weight: 400; 
}

.Normal-C {
font-family: "Verdana", sans-serif; font-size:12.0px; 
line-height: 1.17em; color:#c0c0c0; 
}