Forums

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
}

<body>
<div id="wrapper">
	<div id="header">
		<div class="container">
	 	 	 <!--Menu Stuff Removed for being long-->
		</div> <!--End Container-->
	</div>	
<div id="maincontainer">
	<div id="content">
			<div class="box">
				<p>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.</p>
				<p>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.</p>
				<p>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.</p>

				</div>	
	</div> <!--End Content-->
</div>
	<div id="footer"></div>
</body>

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.

jurotek

@DrunkenCowboy
Try this
Specify height for the footer and than offset that height with negative padding-bottom on wrapper of same value as height of the footer.

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.

jurotek

How about like this
http://codepen.io/anon/full/cnBmq

jurotek

ooops, just noticed if I remove paragraph the footer doesn't stick but moves up

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?

jurotek

this one I think is better
http://codepen.io/anon/full/adClF

edit
nope it's not

jurotek

Finally
http://codepen.io/anon/full/wvAhG

you might want to do some fine adjustments to it, but it basically does what you want

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.

treehouse : what would you like to learn today?

Forums

Sticky Footer and Content Problem