3 replies [Last post]
Marss911
Marss911's picture
Offline
newbie
The Netherlands
Last seen: 12 years 1 week ago
The Netherlands
Timezone: GMT+1
Joined: 2006-11-30
Posts: 2
Points: 0

Hey guys,

Currently looking into CSS styled websites, never made any before
in my life. Just stuff based on tables etc.
Anyway, i've made a design that should work like this :

Footer always sticks to the bottom of the page, once it has less content
to fill for the size of your window. Once more content the footer will move
with the design. Its doing alright inside FireFox and even in the mac application
Safari. Just inside any version of IE its not doing what it supose to do.

As for the content, I made 2 divs inside a container div that could carry the content
for my website. What I discoverd when I was trying to insert content in the left content
box the footer popt to the right, once removed the footer was in its original possition.
Doesnt matter if I add or delete content in the right box, just the left one is driving me
nuts.

Here's the code I used and the temp website :

- Template Footer stick

Template


Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In augue. Sed vitae urna feugiat ante faucibus scelerisque. Maecenas non risus vitae velit auctor tincidunt. Ut facilisis elit non metus. Quisque ac dolor. Morbi eget erat in eros rhoncus imperdiet. Aenean egestas lectus ac sapien. Pellentesque non metus ac justo luctus feugiat. Nam elit elit, sagittis vel, eleifend quis, imperdiet non, lorem. In hac habitasse platea dictumst. Suspendisse convallis, dui vitae auctor elementum, eros orci porta nisl, in ullamcorper leo wisi eget mi. Sed eget sem. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin sit amet diam at elit lacinia convallis. Nullam massa ligula, posuere sit amet, gravida a, placerat ac, justo. Cras vulputate. Aliquam sed enim non justo sollicitudin tempor.


Donec consequat cursus elit. Quisque posuere, massa blandit tincidunt aliquam, ipsum lectus egestas tortor, a iaculis ipsum urna et quam. Donec ultrices varius mi. Sed non magna. Sed ligula. Etiam magna quam, viverra at, fringilla nec, nonummy ut, wisi. Aenean volutpat, tellus at faucibus bibendum, sapien massa mattis lorem, id volutpat quam odio vitae mauris. Donec laoreet lacinia urna. Integer adipiscing dui nec dui. Curabitur non nulla. Vestibulum faucibus, quam ut iaculis volutpat, nibh risus tempus risus, quis lobortis nulla erat nec ipsum. Pellentesque ac est in libero semper hendrerit. Maecenas accumsan est quis diam varius laoreet. Ut velit risus, sollicitudin in, tempor ut, gravida non, sem. Quisque at quam vel orci volutpat luctus.


Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In augue. Sed vitae urna feugiat ante faucibus scelerisque. Maecenas non risus vitae velit auctor tincidunt. Ut facilisis elit non metus. Quisque ac dolor. Morbi eget erat in eros rhoncus imperdiet. Aenean egestas lectus ac sapien. Pellentesque non metus ac justo luctus feugiat. Nam elit elit, sagittis vel, eleifend quis, imperdiet non, lorem. In hac habitasse platea dictumst. Suspendisse convallis, dui vitae auctor elementum, eros orci porta nisl, in ullamcorper leo wisi eget mi. Sed eget sem. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin sit amet diam at elit lacinia convallis. Nullam massa ligula, posuere sit amet, gravida a, placerat ac, justo. Cras vulputate. Aliquam sed enim non justo sollicitudin tempor.


Donec consequat cursus elit. Quisque posuere, massa blandit tincidunt aliquam, ipsum lectus egestas tortor, a iaculis ipsum urna et quam. Donec ultrices varius mi. Sed non magna. Sed ligula. Etiam magna quam, viverra at, fringilla nec, nonummy ut, wisi. Aenean volutpat, tellus at faucibus bibendum, sapien massa mattis lorem, id volutpat quam odio vitae mauris. Donec laoreet lacinia urna. Integer adipiscing dui nec dui. Curabitur non nulla. Vestibulum faucibus, quam ut iaculis volutpat, nibh risus tempus risus, quis lobortis nulla erat nec ipsum. Pellentesque ac est in libero semper hendrerit. Maecenas accumsan est quis diam varius laoreet. Ut velit risus, sollicitudin in, tempor ut, gravida non, sem. Quisque at quam vel orci volutpat luctus.








Thanks for reading, hope you guys can help me out!

Regards
Marcel

mklappen
mklappen's picture
Offline
Regular
Chicago, IL USA
Last seen: 11 years 37 weeks ago
Chicago, IL USA
Joined: 2006-11-28
Posts: 19
Points: 0

I don't have IE6 on my PC

I don't have IE6 on my PC anymore but it was looking strange in IE7. Adding a clear: both; to the #container-foot div in your css fixed it in IE7 at least. Since the left and right content divs are both being floated you need to clear to get it to line up correctly.

#container-foot { clear: both; width: 100%; background: #CCC; position: absolute; bottom: 0 !important; height: 40px; }

Marss911
Marss911's picture
Offline
newbie
The Netherlands
Last seen: 12 years 1 week ago
The Netherlands
Timezone: GMT+1
Joined: 2006-11-30
Posts: 2
Points: 0

Thanks for helping out

Thanks for helping out mklappen!
Worked perfectly both in IE6 and IE7.

Cheers

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 9 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Are you finding the footer

Are you finding the footer always creeps just below the bottom of the browser window?

You might want to try a negative margin on container-page. Make it at least the height of the footer and move the footer outside container-page. For more details take a look at TheManInBlue's FooterStickAlt page.