Sticky Footer and Content Problem

[DrunkenCowboy]

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.






 

[DrunkenCowboy]

Looks like no one can help?

[Paulie_D]

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?

[DrunkenCowboy]

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.

[DrunkenCowboy]

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.

[Paulie_D]

That menu needs sorting out. Ick!

More later

[DrunkenCowboy]

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.

[DrunkenCowboy]

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?

[DrunkenCowboy]

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.

[Author]

Posts