position a footer div at bottom of page regardless of page height css

This site is best viewed in a modern browser with JavaScript enabled.

position a footer div at bottom of page regardless of page height css

1cookie

Im working on a template:

here. I want to make a footer div position at the bottom of the page, naturally. I dont want fixed positioning, i want the div to scroll with the page.

Ive tried all sorts:

 position:absolute; left:0; bottom:0;

Ive tried wrappers:


#main-wrapper {min-height:100%;}
html, body, #main-wrapper {height:100%;}

all the forums seem to regurgitate this information? Any CSS ninjas out there that can help?

1cookie

1cookie;1150616 wrote:
hi

Im working on a template:

here. I want to make a footer div position at the bottom of the page, naturally. I dont want fixed positioning, i want the div to scroll with the page.

Ive tried all sorts:
 position:absolute; left:0; bottom:0;
Ive tried wrappers:
#main-wrapper {min-height:100%;}
html, body, #main-wrapper {height:100%;}
all the forums seem to regurgitate this information? Any CSS ninjas out there that can help?

edited the link above!

gellegbs

absolute positioning may be your problem, it stays put and will not move as data is being added.

Here's a site that has the wrapper resolution you mentioned, i never used them before so idk.
http://ryanfait.com/resources/footer-stick-to-bottom-of-page/

I was going bonkers over divs not ending up where I wanted them too. I too in the beginning started making everything absolute so i could place them where I wanted. This didn't work well. So I watched some utube tut vids and tried some things out myself and am getting a grip on the whole div thing.

Here are a few tips I took many painstaking hours to figure out:

1.If your divs are nested (inside another main div) make sure the total px of each div that is nested is equal to or less than the parent div. Include any padding or margin space. I ran into this issue a lot when i tried to insert multiple columns and the inserted column bounced down the page instead of next to the previous column.

2.If you want to stack 3+ divs side by side float all left, or right; exception is the last div you stack. So if you have 2 divs as columns and want a third float the first two left and the third either left or right. if you have 3 divs as columns and want a fourth column float the first 3 left and 4th one left or right.

I hope this helps ya.

1cookie

gellegbs;1150680 wrote:
absolute positioning may be your problem, it stays put and will not move as data is being added.

Here's a site that has the wrapper resolution you mentioned, i never used them before so idk.

That appears to have done the trick. Nice workaround with:

margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */

and the empty

<div class="push">

element.

thanks for the help.

darrenbang

try this...

	#outer{
		position:fixed;
		top:0;
		left:0;
		width:100%;
		height:100%;
	}
	#inner{
		width: 50%;
		height: 50%;
		top:50%;
		margin: 0 auto;
		position: relative;
		background:orange;
	}

More examples...CSS Div Positiong

Darren

sebastianpierre

Here's a tutorial that helped me with this issue!
http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page