Fixed Footer and Images

HTML & CSS
1

Hello,

In the past I’ve had trouble with Fixed Footers working in some browsers. Here is the site I’m currently working on, just wondering if someone could let me know how to achieve my footer as a fixed footer and also the packages div with the images at the bottom as well. Throughout the website once I start building it more there will only be one image at the bottom which is why I can’t have the images and navigation in the same div. Hope to hear back from someone, thanks for all the help guys. Appreciate it…

Top of Lake Superior

Thanks in advance,

Mike

2

#foot {
position:fixed;
bottom:0;
width:100%;
}

Is prob all you need. Anything placed in the #foot (packages?) will be fixed too.

3

Changed my mind not going to have a fixed footer on the page. But on the inside of the website I will…

Here is what I have coded already for inside pages…

Top of Lake Superior

What I’d like is the footer to be fixed at the bottom so the navigation is always there so when you scroll its always appears at bottom of the browser. As wel I need the “image” div on the right to remain at the bottom of the page as well, but can not be included in the footer div, since through the site this image will change.

Can someone lend me a hand to help me acheive this.

Thanks in advance,

Mike

4

Got it to work, can someone please check to make sure it works in IE7 and IE8.

Thanks

5

Hi,

It’s misplaced in IE7 (as usual) because without co-ordinates it doesn’t really know where absolute/fixed elements belong.

However you can’t use left or right co-ordinates as that would affect the centering so you need to first make sue the elements is in the correct position horizontally and then fix it.

Here are the changes needed.


#image {
  [B]  padding-left: 475px;
    width: 500px;[/B]
}
[B]#image img{
    position: fixed;
    bottom:0px;
[/B]
}

#footer {
 [B]   margin:0 auto;
    clear: both;
    width: 960px;[/B]
}
/* Navigation */

#nav {
[B]    margin:0 0 0 90px;
    width: 780px;
    position: fixed;
    bottom:0px;
    height:25px;[/B]
}

The fixed positioning has been removed in both cases from the parent and then applied to the child instead.

6

Thank you, I’ll keep this in mind for future fixed footers :slight_smile: