problems with creating a footer

I'm trying to create a nav bar at the bottom of my page

[rpatel89]

Hi! I'm new to the forums and working on my first website, so please forgive me if i seem ignorant. I'm trying to a put a few links at the bottom of my pages (like where you see copyright notices and contact links on a lot of pages).I read some of the threads here and figured that i should create a </div> that has the following style:

}
.footer {
position: absolute;
left: 0px;
bottom: 0px;
width: 100%;
}

This works for the shorter pages, but the problem is that the code does not work for the pages on my site that are longer than the screen (i.e. you need to scroll down to get to the bottom).

Thanks for your help!

[innocbystr]

I wouldn't think that you would need to use absolute positioning. Going with the natural flow the footer should be the last div on your page.

[rpatel89]

I tried that, but for the pages with little content on it, that results in the Links appearing directly below the content (not at the bottom). If i try to just insert some space in between, it still doesn't work because on different monitors.

[innocbystr]

I understand what you mean now. Are you using tables or all divs?

Blair

[rpatel89]

I'm using all divs. At the top of every page I have my logo and under that a Nav Bar (Rollover images) and under that I use divs to put whatever content I need.

[innocbystr]

If you don't have enough content to "push" the footer down you could set a

margin-top:?px

in your footer div. However this may cause problems if your content ends up exceeding the amount that you set. May work OK in some browsers but not others.

Perhaps someone more knowledgeable out there can help you further.

Blair

[rpatel89]

I kind of figured it out using your idea. i set a

margin-top: 100%

in the div and it works on most of the pages.

Thanks for your help Blair,

Rishi