Align a relative positioned div to bottom

bigdogchris

Fully [H]
Joined
Feb 19, 2008
Messages
18,697
I am designing a template page.

I have a page with 2 columns (float left/right)within a wrapper and a footer outside of the wrapper, that clears the left/right float, and butts up to the bottom of the wrapper. I have it set so that as one column expands down, the footer is pushed down. However, on an empty page, the footer comes right up to the top of the page.

Is there a way to set it to automatically start at the bottom of the browser, even on an empty page? I do not want to have to set a manual size on the columns/wrapper because obviously what is aligned bottom to me is different for your resolution. I also do not want to make it an absolute bottom 0 because it will force the footer to stay at that spot, even if the column grows, unless you guys know a way to over ride the absolute positioning if the column dictates the footer be pushed down. I suppose I could manually remove the absolute position on pages that have the additional content but I'd like it automated if possible since it's a generic/template. I just want to load it in, paste in content and have the code take care of the alignment accordingly.

Thanks!
 
Well found another site. Can't get it to work yet but it says to put a 100% height wrap, with absolute bottom 0 footer inside that. Then pad the bottom of your content div with an equal amount of pixels of the footer. That way as the page height pixels increases the 100% wrap will go down to the bottom.
 
I can't get 100% min-height to work on the style sheet. I'm inserting a div and iding it correctly. I'm trying to set that through the style sheet and it's not importing. If I insert the div and do inline style for the height to be 100%, it works.
 
Last edited:
I can't get 100% min-height to work on the style sheet. I'm inserting a div and iding it correctly. I'm trying to set that through the style sheet and it's not importing. If I insert the div and do inline style for the height to be 100%, it works.

Hard to tell what's going wrong when we can't see the code. Give us a link to the test site or post your code.
Have a look at my full height layout demo, it sounds like you're using the same method. Maybe following that will help you.
 
Back
Top