Bottom Alignment

Current working file is here:

http://ravenwave.com/clients/opi/

link to the css file is here:

http://ravenwave.com/clients/opi/opi.css

The issue is that I have a background with an associated navigation bar that need to align bottom. I've got that part all figured out and working. However, the snag is that if the browser window is shrunken to a small vertical height, the bottom navigation bar (and associated background) keeps riding up and then gets mixed up with the other content. Conversely, if the page is extra long in content and so needs to scroll, then the bottom bar and background is aligned to the bottom of the window, rather than the page.

Obviously this has to do with absolute vs. relative positioning and is not working how I want it to work.

Right now I'm guessing that I need to switch to a relative postioning, but I'm hoping that maybe there are some other fixes that I don't know about. I've tried a few things, but am just kind of wasting time and need to get this figured out.

Thanks

Current working file is here:

 

http://ravenwave.com/clients/opi/

 

link to the css file is here:

 

http://ravenwave.com/clients/opi/opi.css

 

The issue is that I have a background with an associated navigation bar that need to align bottom. I've got that part all figured out and working. However, the snag is that if the browser window is shrunken to a small vertical height, the bottom navigation bar (and associated background) keeps riding up and then gets mixed up with the other content. Conversely, if the page is extra long in content and so needs to scroll, then the bottom bar and background is aligned to the bottom of the window, rather than the page.

 

Obviously this has to do with absolute vs. relative positioning and is not working how I want it to work.

 

Right now I'm guessing that I need to switch to a relative postioning, but I'm hoping that maybe there are some other fixes that I don't know about. I've tried a few things, but am just kind of wasting time and need to get this figured out.

 

Thanks

Yes, whats happening is your DIV that contains the background/bottom navigation has "position: absolute;" applied to it?

My suggestion is to create a wrapper/basement, this will need to have "position: relative;" applied, then the problem should be solved.

You might need to give it a "min-height: 100%;" aswell, this wont work in IE6 so use a conditional comment to give ie6 "height: 100%" that should equal to min-height functionality in other browsers.

if you use "position: absolute;" on something, and want it to be the "absolute position" inside the surrounding box, instead of the whole page. Then you need to apply "position: relative;" to the surrounding box, I.E. the wrapper/basement.

Thanks for the advice. I have reworked the page without absolute placement.

This page helped.