0

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>    
9
  • all the images you gave us are relative to your root directory, and we don't have that. Do you have this online with a website we can access?
    – Ilan Biala
    Jul 15, 2013 at 3:39
  • why do you need the images? you have the sizes Jul 15, 2013 at 3:48
  • Because otherwise the page is blank (jsfiddle.net/3ZLLu), and did you have any JavaScript, because there is no text on the page.
    – Ilan Biala
    Jul 15, 2013 at 3:49
  • instead of image use background-color:#FFF; I don't have the images uploaded online. Jul 15, 2013 at 3:51
  • I dont see the problem i clicked on the links u posted below and it looks like the footer is on the bottom?
    – tyler
    Jul 15, 2013 at 4:28

2 Answers 2

2

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!

2
  • it didn't work, I set the position fixed like you said and here's the problem postimg.org/image/rl1vk65a5 postimg.org/image/ugeyr19a5 Jul 15, 2013 at 4:32
  • but I lost enough time with this so, that will be the answer, thank you Jul 15, 2013 at 4:37
1

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.

4
  • the problem is that the footer stays in the middle of the page, it's not going down, even with position fixed. Jul 15, 2013 at 3:59
  • Try moving the foot div outside of the footer element. It's possible you have some other stylings applied that are affecting the foot div. Also, your foot.png image might not fit inside the div which may cause it to display in the middle of the page. For example, replace the background-image with just background: #000 and you should see a sticky black footer. See this fiddle: jsfiddle.net/3ZLLu/1 Jul 15, 2013 at 4:03
  • can you see what's happening? Jul 15, 2013 at 4:12
  • I lost enough time with this so, that will be the answer, thank you for your time. Jul 15, 2013 at 4:38

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.