You are viewing our Forum Archives. To view or take place in current topics click here.
[HELP] Footer floating up the page
Posted:

[HELP] Footer floating up the pagePosted:

FrieZe
  • Resident Elite
Status: Offline
Joined: Jun 11, 201410Year Member
Posts: 297
Reputation Power: 14
Status: Offline
Joined: Jun 11, 201410Year Member
Posts: 297
Reputation Power: 14
Hey there,

So i'm having yet another issue with this website I'm working on. This time the issue I am having is with the footer.

What I want is to have the footer at the bottom of the page and not stuck at the bottom of the viewport.

First of all this is what is happening;
[ Register or Signin to view external links. ]

As you can see There is an abyss of blank space between the bottom of the footer and the end of the actual page, Now the funny thing is this. When i have my page resized or shrunk the footer sits at the bottom of the page perfectly it's just when the page is maximised does this issue occur.

This is the HTML for my footer;
[ Register or Signin to view external links. ]


This is the CSS for my footer;
[img]http://prntscr.com/3waplw[/img]


If anybody can help I'm not sure how i can make it up but I promise i will.
#2. Posted:
MushroomElm
  • V5 Launch
Status: Offline
Joined: Sep 18, 201113Year Member
Posts: 3,025
Reputation Power: 134
Status: Offline
Joined: Sep 18, 201113Year Member
Posts: 3,025
Reputation Power: 134
Here's a few things to try:

margin-top

padding-top

clear: both

You can mix those together or see if you can get them to work on their own.
#3. Posted:
FrieZe
  • Resident Elite
Status: Offline
Joined: Jun 11, 201410Year Member
Posts: 297
Reputation Power: 14
Status: Offline
Joined: Jun 11, 201410Year Member
Posts: 297
Reputation Power: 14
Thanks for the help I've began to experiment with the footer so using these i have a smaller more simple version.

But just as a general question is it acceptable to have a webpage without a footer?
#4. Posted:
FrieZe
  • Resident Elite
Status: Offline
Joined: Jun 11, 201410Year Member
Posts: 297
Reputation Power: 14
Status: Offline
Joined: Jun 11, 201410Year Member
Posts: 297
Reputation Power: 14
ObscureCoder wrote
MushroomElm wrote Here's a few things to try:

margin-top

padding-top

clear: both

You can mix those together or see if you can get them to work on their own.


Clearly doesn't do CSS at all.


he made an attempt to assist me and for that i thank him, Unless you have a definitive answer i would prefer if you stopped cluttering the thread with useless and pointless posts.
#5. Posted:
ObscureCoder
  • Resident Elite
Status: Offline
Joined: Jun 29, 201311Year Member
Posts: 211
Reputation Power: 13
Status: Offline
Joined: Jun 29, 201311Year Member
Posts: 211
Reputation Power: 13
TerminalSkunk wrote
ObscureCoder wrote
MushroomElm wrote Here's a few things to try:

margin-top

padding-top

clear: both

You can mix those together or see if you can get them to work on their own.


Clearly doesn't do CSS at all.


he made an attempt to assist me and for that i thank him, Unless you have a definitive answer i would prefer if you stopped cluttering the thread with useless and pointless posts.

Make the site live and I'll give you a definitive answer. I'd rather live debug to try and solve your problem instead of manually trying recreate your footer.
#6. Posted:
AAW
  • TTG Senior
Status: Offline
Joined: Apr 30, 201113Year Member
Posts: 1,574
Reputation Power: 70
Status: Offline
Joined: Apr 30, 201113Year Member
Posts: 1,574
Reputation Power: 70
Just add this to your css and add the <div class="footer"> </div> tag id to footer

#footer{
    position:fixed;
    height:50px;
    background-color:red;
    bottom:0px;
    left:0px;
    right:0px;
    margin-bottom:0px;
}


Then add this
margin-bottom:50px;
to the body in the css file

That should fix it
Jump to:
You are viewing our Forum Archives. To view or take place in current topics click here.