CODEWITHSUNDEEP
csshtmlsticky-footer
Mariangela Vidotto
Mariangela Vidotto

Reputation: 89

Sticky footer at the bottom

I'm having trouble with my footer, it's not being pushed by the content, I already tried to substitute absolute to relative, but with no success, I'm trying to use bottom:0; but it's not working either, here is my css code:

html, body {


width:100%;
min-height:100%;
background-image: url(../img/bg.png);
background-repeat: repeat;

}   

* {
margin: 0px;
padding: 0px;
}
a, img {
border:none;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
 }






#wrapper {
width: 1024px;
margin-right: auto;
margin-left: auto;
min-height: 100%;
position:relative;  
}


#foot {
width: 100%;
height:200px
position:absolute;
bottom:0;
background-image:url(../img/foot.png);
background-repeat:no-repeat;


}




#banner {
min-height: 100%;
margin:0;
 padding:0;
position: relative;
top: 24px;
background-image: url(../img/banner2.png);
background-repeat:no-repeat;
width:100%;
height:173px;

}


#navigation {
height: 60px;
position: relative;
left: auto;
width: 100%;
top: 23px;
margin: 0px;
padding: 0px;
z-index:1;
border: none;   
}

#categoria {
position: absolute;
width: 710px;
height: 240px;
z-index: 0;
left: -29px;
top:30px;
padding: 0px;
z-index:1;



}

.othergames{
position: absolute;
top: -13px;
width: 740px;
height: 251px;
background-image: url(../img/otherg.png);
background-repeat: no-repeat;
z-index:1;
left: -43px;


}

.othergames-back{
position: absolute;
top: -11px;
width: 730px;
height: 247px;
background-color:#FFF;
left: -37px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;

}


#texto{
height: 10px;
text-align:center;
width: 50px;
margin: 0px;
padding: 0px;
left: 34px;
top: 243px;
}

#apDiv1 {
position: absolute;
left: -3px;
top: 3px;
width: 209px;
min-height: 100%;
z-index: -1;
margin: 0px;
padding: 0px;
}

#like {
position: relative;
left: -3px;
top: 550px;
width: 215px;
min-height: 100%;
z-index: -1;
margin: 0px;
padding: 0px;
}



#apDiv2 {
position: absolute;
left: 220px;
top: 60px;
width: 862px;
height: 482px;
z-index: 0;
padding: 0px;

}

#apDiv4 {
margin: 0;
padding: 0;
position: absolute;
left: -6px;
top: 90px;
width: 201px;
height: 499px;
z-index: 1;
}

And the html code:

 <div id="wrapper">
 <div id="banner"></div>

 <div id="navigation">








<div id="apDiv4">






 </div>



 <div id="fb-root"></div>

<div id="like">
<div class="fb-like-box" data-href="https://www.facebook.com/pages/Legend-of-Games/476628629090111" data-width="215" data-show-faces="true" data-stream="false" data-show-border="false" data-header="false"></div></div>



<div id="apDiv2">



   <script>
 (function($){
      $(window).load(function(){
        $("#apDiv2").mCustomScrollbar();


    });
 })(jQuery);
</script>

<div align="center" id="thumb">

<div id="screen_game">


<a href="legendofgames/gameview.php?recordID=<?php echo $row_GameData['idGames']; ?>">  <img style="border-radius:5px;border:thin solid #FFF;" src="../legendofgames/documentos/games/<?php echo $row_GameData['strImage']; ?>"  width="160" height="130"/></a>
<div align="center" id="gametext"><?php echo $row_GameData['strNome']; ?> </div>
</div>


</div>

<div id="apDiv1"><img src="../img/lateralb2.png" width="209" height="592"/>  



</div> 

</div>
</div>


<footer >
<div id="foot"></div>

</footer>

</body>

Upvotes: 0

Views: 487

Answers (2)

Ilan Biala
Ilan Biala

Reputation: 3417

Since you had some background images and content that weren't available, I generated and inserted some into a <section> with an ID of container. As you can see in the fiddle, I have just set up the footer as a fixed position block element at bottom: 0;, which means that it will always be at the bottom.

CSS:

footer {
    width: 100%;
    position: fixed;
    bottom: 0;
    background: green;
}

Have fun with the rest of the page!

Upvotes: 2

Minh Nguyen
Minh Nguyen

Reputation: 273

I think you need to change your position to fixed.

#foot {
width: 100%;
height:200px
position:fixed;
bottom:0;
background-image:url(../img/foot.png);
background-repeat:no-repeat;
}

I can't test your code but I was able to get a sticky footer using a similar styling.

Upvotes: 1

Related Questions