-1

I am having some issue trying to implement sticky footer, that is to make the footer stay at the most bottom of the page, I think this problem is due to the fact that I use 2 divs to render rounded corners for my page, I have searched for all possible solution and tried them, nothing works.

So basically, this is my design:

<div class="global">
    <div class="wrapper">
        <div class="banner"></div>
        <div class="content"></div>

        <div class='footer'>
        <div class='footercontent'>COPYRIGHT INFO</div></div>
    </div>
</div>

This is my CSS:

body {
font-family: Verdana, Geneva, sans-serif;
}
#global {
 margin: 0 auto;
 width: 85%;
 min-width: 1020px;
}
.wrapper { 
  background: #FFFFFF; 
}
.footer { 
  background: url('../Images/roundedcornerRIGHT.gif') no-repeat bottom right; 
}
.footer div {
  height: 40px; 
  background: url('../Images/roundedcornerLEFT.gif') no-repeat bottom left; 
}
.footercontent {
    text-align: center;
    font-size: small;
}

No matter what solution I try posted by other people on Stackoverflow, nothing works, it will either not move the footer down to the bottom of the page, or it just messes up with the footer's layout of the rounded corners.

InnovativeDan
  • 1,067
  • 2
  • 8
  • 10
  • The problem is that you `#global` element is not reaching all the way to the bottom. Use Firebug to inspect it, or throw a border on it in your css, and this will become clear. You need to get that to go the bottom, *then* your footer can move to the bottom. Note: to get it to span the full height, you'll probably want to do something like `html, body {height: 100%;}` and then `#global {height: 100%;} – random_user_name Dec 22 '13 at 19:09
  • @BuddhistBeast in theory yes, but because this is the extracted part of my code, so I'm not sure if it exactly represent what I am working on. – InnovativeDan Dec 22 '13 at 19:23
  • @cale_b you are right, I tried setting a border, none of the Divs are extending down to the bottom of the page, EVEN AFTER adding height:100%; to #global and body. – InnovativeDan Dec 22 '13 at 19:25
  • My question for you is.. do you need to have that global div or can you suffice with just the wrapper? Are all of the measurements set in stone? The reason why I ask is because 1020px is a lot.. I think the standard right now is 960px. – BuddhistBeast Dec 22 '13 at 19:46
  • really? because i'm designing it based on my screen, guess that's a wrong move. but if I reduce below 1020px, the navigation bar will collapse itself and break a new line, doesn't look very nice.. meh, that's not the focus of the question, I guess we can ignore that. – InnovativeDan Dec 22 '13 at 19:55

4 Answers4

0

Try this:

.footer { 
  background: url('../Images/roundedcornerRIGHT.gif') no-repeat bottom right; 
  position: absolute;
  bottom: 0;
}
Mohammad Areeb Siddiqui
  • 9,795
  • 14
  • 71
  • 113
  • doesn't work, the whole footer seems to have broken out of the wrapper and resized itself, my web is using fluid design, so what I mean is that the footer's width isn't the same size as the main design anymore. Look at this image: http://img809.imageshack.us/img809/5605/xvti.png – InnovativeDan Dec 22 '13 at 19:12
0

If you want footer at the bottom give a minimum height to your content.

min-height: 800px;
AbhinavRanjan
  • 1,638
  • 17
  • 21
  • 1
    this works, but nobody is going to hardcode a min-height to a fluid page design, every visitor to the site is going to be on different screen resolution. – InnovativeDan Dec 22 '13 at 19:32
  • Did you try this?http://stackoverflow.com/questions/9642460/footer-at-the-bottom-in-fluid-layout – AbhinavRanjan Dec 22 '13 at 19:46
0

Change your markup to this:

<body>
<div class="wrapper">
        <div class="banner"></div>
        <div class="content"></div>
   </div>

  <div class='footer'>
        <div class='footercontent'>COPYRIGHT INFO</div></div>
    </div>
</body>

And then add these styles:

.footer {
 position:fixed;
 left:0px;
 bottom:0px;
 width:100%;
}
Mister Epic
  • 16,295
  • 13
  • 76
  • 147
  • tried this, but I have to remove "left:0px;" and "width:100%;" because I'm using a centered design with non-100% width. but after removing it, this happens: http://img809.imageshack.us/img809/5605/xvti.png – InnovativeDan Dec 22 '13 at 19:17
0

Okay, so assuming you want to keep everything you are currently doing.. I have a quick fix for you. Now, a few things to note.. I did add in a height variable to your 'wrapper' class because I needed to gauge it as if there were space inside of the wrapper itself. I also went ahead and put in a few colors to let me know exactly where I am. Either way, the simplest fix is to take your footer div and put it outside of the wrapper. The way this all works is, the footer is showing up inside of the wrapper class, the only problem is that nothing else is showing up in that class, which causes the footer to be the only thing.. creating the problem of having this footer at the top. However, if you would like to stay current with every page, moving the footer down to the bottom of the global div should be your fix, the code below:

<div class="global">
    <div class="wrapper">
        <div class="banner"></div>
        <div class="content"></div>
    </div>
    <div class='footer'>
        <div class='footercontent'>COPYRIGHT INFO</div>
    </div>
</div>

So the problem really was in the HTML, not the CSS. You can keep your CSS or play with it as you please but to better describe what I am saying, I have been fiddling (haha) with a JsFiddle for you :) Comment below if I need to make more sense of what I am saying!

BuddhistBeast
  • 2,652
  • 2
  • 21
  • 29
  • this is why I have not moved the footer div out of the wrapper: http://img541.imageshack.us/img541/57/nxq1.png – InnovativeDan Dec 22 '13 at 20:05
  • Technically.. the "global" is your wrapper, not the wrapper.. You can change that by just taking out the "global" div in general and then putting footer at the bottom of wrapper still. – BuddhistBeast Dec 22 '13 at 20:06
  • This is what your code would look like without the "global" div http://jsfiddle.net/XqNzp/3/ Which it still works just fine. – BuddhistBeast Dec 22 '13 at 20:10
  • i don't think global div has anything to do with this problem, after moving footer div out of wrapper, it seems to have "disconnected" itself from it, thus, the content and the rounded corners on footer doesn't flow together and connect. Like that you see in the picture above. – InnovativeDan Dec 22 '13 at 20:14
  • Are you trying to keep everything connected? Like no space in between your footer and other contents? – BuddhistBeast Dec 22 '13 at 20:16
  • of course, look at the picture, BEFORE and AFTER. how would the rounded corner design work if it's not connected. – InnovativeDan Dec 22 '13 at 20:17
  • P.S. forgot to mention, the white color is content's background, the greenish color is page's background. maybe you misunderstood because the picture isn't clear about the whole design – InnovativeDan Dec 22 '13 at 20:18
  • There are multiple answers here that help to fix your footer situation and every one of them works.. I hate to say it but your design cannot be perfect with your website. You have to push and pull and give a little in certain situations. As much as you want to keep your code, it is becoming more and more obvious that it will not meet the standards of which you are seeking. – BuddhistBeast Dec 22 '13 at 20:20
  • By the way, with every JsFiddle I have presented you, I have intentionally put space in to make up for whatever content you have inside of your code. I would suggest implementing my code with all of your content already there. If that does not work, you need to give us a little more HTML and CSS code to work on. – BuddhistBeast Dec 22 '13 at 20:22
  • Additionally, to go on top of all of this. This stack question will be useful for you in certain ways as well : http://stackoverflow.com/questions/7271521/is-there-a-new-standard-web-page-width-how-many-pixels – BuddhistBeast Dec 22 '13 at 20:27