Can't get the footer to stick to the bottom of the page

  • Resolved JaanMatti

    (@jaanmatti)


    12 years, 9 months ago

    Hi,

    I want to assign what I think is called a sticky footer on my page, but I dont understand what I’m doing wrong. I want the footer to always come after the content, but the content area’s height is variable, so I also need a minimum height of 1300px for the container.

    https://borealis.webson.ee/partnerlus/delux/

    I have given my container a minimum height (1300px), and also height:100% and height:auto, so in theory, it’s height should expand according to the contents inside it, right? For some reason, it wont and it just stays at 1300px, so the footer just floats in the middle of the screen.

    Maybe someone with a better understanding of CSS can help me out in this.

    Thanks a lot,
    Jaan-Matti

Viewing 2 replies - 1 through 2 (of 2 total)

  • You don’t need any height set on any of the sections — they are as high as the content require.

    The problem is due use of the float property — which is assigned to the pagecontent section of your page. When you have a floated element, elements below it need to include clear: both; so they go below the floated element. So all you need to do is add that to the #footer CSS on line 814 of style.css

    BTW, remove the margin-bottom from that section and the “bottom: 0” in the other #footer CSS on line 226 – they are not doing anything!

    Thread Starter JaanMatti

    (@jaanmatti)

    WPyogi, thanks a lot ! I got it fixed. You have no idea how long I stressed with that problem and couldnt figure it out ,so your help was invaluable.

    Thanks again!
    Jaan-Matti

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Can't get the footer to stick to the bottom of the page’ is closed to new replies.

Tags