...

View Full Version : Footer issues!



hardy9298
07-11-2011, 08:02 PM
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.

alykins
07-11-2011, 08:06 PM
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

hardy9298
07-11-2011, 08:07 PM
Yeah, sorry about the amount of css. Thanks, i'll give this a try.

alykins
07-11-2011, 08:09 PM
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:

hardy9298
07-11-2011, 08:10 PM
Sorted it, thank alkins!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum