Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Sticky Footer and Content Problem

  • This topic is empty.
Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #39295
    DrunkenCowboy
    Participant

    Alright, so I am having a problem getting the footer to move down when content is longer than the screen. Basically what happens, is if I set the #maincontainer {position:relative} it will work, but the background image for that (paper behind the content) will not go down the whole way on a large monitor. If I set it position:fixed then it will go down, but the content will not push the footer down like it will with relative. I have been working on this for a while and it is frustrating.

    It is a sticky footer that works just fine, but I can’t seem to get the background image to go all the way to the footer AND have the text push the footer. It is one or the other. I read a number of forums and posts but none of them helped. Was hoping someone could help…Here is the code:

    * {
    margin: 0;
    padding: 0;
    z-index: 0;
    }

    body {
    background-image: url(images/bgmain.jpg);
    background-repeat: repeat;
    }
    html,
    body {
    margin:0px;
    padding:0px;
    height:100%;
    overflow-x: hidden;
    }

    #wrapper {
    min-height:100%;
    position:relative;
    }

    #header {
    height:225px;
    background: url(images/bgheader.png);
    background-repeat: repeat-x;
    position: relative;
    z-index:9999;
    }

    #content {
    background: url('images/bgcontent.png') repeat-y scroll 0 0 transparent;
    height: 100%;
    padding-bottom: 85px;
    margin-top: -20px;
    position: relative;
    width: 620px;
    float: right;
    }

    #footer {
    width:100%;
    height:85px;
    position:absolute;
    bottom:0;
    left:0;
    background:url(images/bgfooter.png);
    background-repeat: repeat-x;
    clear: both;
    }

    #maincontainer {
    width: 980px;
    display: inline-block;
    height: 100%;
    position: fixed;
    left: 50%;
    margin-left: -575px;
    }
    .box {
    width:580px;
    text-align: left;
    padding: 30px 20px
    }







    Donec sed odio dui. Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui. Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui. Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui. Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.


    Donec sed odio dui. Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui. Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui. Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui. Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.


    Donec sed odio dui. Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui. Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui. Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui. Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.







    #107675
    DrunkenCowboy
    Participant

    Looks like no one can help?

    #107678
    Paulie_D
    Moderator

    I’m not seeing a closing div tag for the wrapper.

    You probably don’t need all that positioning that is going on too!

    Do you have a link or could you put it on Codepen?

    #107679
    DrunkenCowboy
    Participant

    Throwing it in CodePen, I am not too sure how to make all the images function so that you can actually see what is going on. I just put a closing div for the wrapper, accidentally deleted it while messing with stuff. All the positioning may not be needed, that is true hah.

    #107683
    DrunkenCowboy
    Participant

    Here is the CodePen link: http://codepen.io/bolwerkm/pen/FdHso
    Unfortunately the CodePen setup looks a little wonky and isn’t what I get on my setup completely. I had to fix the Content div so that it would actually go to the bottom of the screen.

    Tried your suggestion Jurotek and it didn’t do anything.

    #107685
    Paulie_D
    Moderator

    That menu needs sorting out. Ick!

    More later

    #107686
    DrunkenCowboy
    Participant

    Right….topic on hand is not the menu. Any ideas about the content moving the footer? Also, the menu will be changing once it is tossed into WP.

    #107693
    DrunkenCowboy
    Participant

    Yeah that was the same problem I was having. It seems to be one or the other. Any idea if there is a jquery solution if it can’t be done in CSS?

    #107701
    DrunkenCowboy
    Participant

    That still doesn’t seem to work. It isn’t pushing down the footer with more content, and it isn’t filling vertically when there isn’t any content.

Viewing 9 posts - 1 through 9 (of 9 total)
  • The forum ‘CSS’ is closed to new topics and replies.