CSS Footor - Please Stay at the Bottom!!!

[anthonyragland]

Can anyone please help me figure out why my footer will not position at the bottom of my HTML and CSS page?

I have been banging my head against my monitoring trying to figure this out for hours. My page is located here:

http://www.thesummitagency.com/WheelsnWaves/cars-trucks-list-page-test.html

Here is a list of things I have checked in order to fix the problem:
1.) Put all the HTML inside of a global-container div.
2.) Applied a float left to all of the elements on the page.
3.) Applied a clear both rule to the footer wrapper.

Many thanks in advance,
Anthony

[roryt]

It is probably because you haven't closed a div. That is what it is normally down to. I would suggest that you have a hard look through your page and validate it to make sure nothing is closed in the wrong place and that everything is closed.

hope that helps

[anthonyragland]

Thank you for your post. I figured out the footer problem. I followed your feedback and re-examined my HTML.

After reexamining the HTML markup, i realized that it was not well coded...i had nested divs and so forth. So i proceeded to clean up the sloppy code and stumbled upon the fix. I realized all the CSS elements of the site were positioned absolute to my global container div. So I proceeded to change the the CSS elements to be relative to my global container div and the footer moved into place (at the bottom where it belongs).

In closing, position all CSS container elements relative to the global container and presto - you have a Self-clearing CSS footer, no matter which column is longer, the footer stays at the bottom. Time for a cocktail!

Hope this helps the next person that may experience a similar problem.

All the best,
A-train

It is probably because you haven't closed a div. That is what it is normally down to. I would suggest that you have a hard look through your page and validate it to make sure nothing is closed in the wrong place and that everything is closed.

hope that helps

[roryt]

I'm glad I could help.

[MidiMagic]

It seems to still be doing it. I think the problem is that you are adding content through a script after the footer is rendered.

[anthonyragland]

The new page is located here:

http://www.thesummitagency.com/WheelsnWaves/cars-trucks-list-page.html

[roryt]

Looks fine to me in bothe ie and ff.

You may like to add the to the footer contain

*margin-top: 10px;

Because it is a bit close in ie

[MidiMagic]

It helps to be looking at the right file.

[roryt]

The link is now broken.

[anthonyragland]

I have fixed the footer problem since my initial post. Thank you all for taking an interest in helping me solve the problem. Here is a link to the page

http://www.thesummitagency.com/WheelsnWaves/cars-trucks-list-page.html

This link will only be active for a couple more days as all the web files are being transfered over to a development server for beta testing.

A-train

[roryt]

Can I suggest that you change the tab buttons at the top of the page. They are bit nasty especially in their orangey yellow state.

[anthonyragland]

Interesting. What are you suggesting I change them too?

[roryt]

It is a really clever way you have used to make the roll over. I would never have thought of that.

I suggest you get rid of the 1 pixel white border that is a round the cream version. I also think you should consider using screen text rather than text in the images them selves.

[anthonyragland]

Thanks for your feedback. You are right about the white border around the tabs and screen text instead of images... Once we launch the beta version of the web site I will retrace my steps and tie up the loose ends.