Footer issues!

Hi, I am having trouble having my footer stick to the bottom of the page. I have googled the issue and attempted several solutions though nothing seems to be working.

Here is my CSS, if anybody could help it would be greatly appreciated.

Currently, my footer is floating as it usually does when it's not stuck to the bottom.

body{
background-image:url(../Images/bgforsite.png);
background-repeat:repeat;
text-align: center;
font-size:14.4px;
font-family:"PT Sans Narrow";
line-height:22px;
width:100%;
color:#595959;
height:100%;
margin:0;
padding:0;

}


#header1{
text-align:right;
height:9px;
background-image:url(../Images/toptexture.png);
background-repeat:repeat;
margin:0 0 2px 0;
box-shadow: 0 2px 10px rgba(0,0,0,.1);


}



#wrapper1{
width:1000px;
margin: 0 auto;
padding: 0;
text-align:center;
color:595959;
min-height: 100%;
position:relative;


}

#wrapper2{
width:1000px;
margin: 0 auto;
padding: 0;
text-align:center;
color:595959;
position:relative;


}

.opening{
width:770px;
line-height:28px;
margin: 0 auto;
padding: 20px 0 0 0;;
}

#header{
width:1000px;
height:288px;
margin:0 0 0 auto;
padding:22px 0 0 0;
background-image:url(../Images/headerlogo3.png);
background-repeat:no-repeat;
background-position:center;


}

#nav{
width:100%;
height:54px;
text-align:center;
border-top: #bcbcbc 1px dashed;
border-bottom: #bcbcbc 1px dashed;
margin: 0 auto;
padding: 0;
text-align:center;
}

#navtop{
width:1000px;
text-align:center;
margin: 0 auto;
padding: 0;
text-align:center;
}

#nav2{
width:1000px;
height:40px;
padding: 0;
text-align:center;
}



#content{
width:1000px;
margin: 0 auto;
text-align:center;
color:595959;
padding:0 0 14px 0;
}

.button{
padding:20px 62px 0 70px;
text-align:center;
}



#divider2 {
width: 200px;
height: 1px;
border-bottom: #bcbcbc 1px dashed;
margin: 0 auto;
padding: 18px 0 0 0;;
text-align:center;
}

#divider3 {
width: 800px;
height: 1px;
border-bottom: #bcbcbc 1px dashed;
margin: 0 auto;
padding: 18px 0 0 0;;
text-align:center;
}

#divider4{
width:100%;
height:1px;
text-align:center;
margin: 0 auto;
padding: 0;
text-align:center;
letter-spacing:20px;
background-repeat:repeat;
}


.facebook{
margin:8px 2px 0 0;

}

.twitter{
padding:8px 2px 0 0;

}

.bigbuttonmiddle{
padding:12px 0 0 0;
text-align:center;
}

.bigbuttonleftright{
padding:12px 0 0 0;
text-align:center;
}

.abilities{
float:left;
padding:30px 0 0 16px;
}

.aboutmemore{
width:586px;
float:left;
text-align:left;
clear:both;
padding:0 0 0 18px;

}

.designlayout{
float:left;
clear:both;
padding:0 0 0 18px;

}

.beloweverything{
float:left;
clear:both;
padding:20px 0 0 18px;

}

#footer{
position: relative;
bottom: 0;
left: 0;
width:100%;
height: 42px;
clear:both;
text-align:center;

}

#smallfooter{
width:100%;
background-image:url(../Images/toptexture.png);
background-repeat:repeat;
position:absolute;
height:9px;



}

Also, my footer div tag is outside my wrapper, the problem is with the CSS.

that's a good deal of CSS my friend :D... what you need to do is put the footer outside the wrapper (which you said you did) and then add a negative margin-bottom that is the height of the footer

Yeah, sorry about the amount of css. Thanks, i'll give this a try.

Yeah, sorry about the amount of css. Thanks, i'll give this a try.

oh it's no prob- i suggest to many (when having issues they cannot limit down) to remove all the extra "fluff" and add it back in later... helps narrow down what is "broken"... best of luck :thumbsup:

Sorted it, thank alkins!