Member Avatar for 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

  • 3 Contributors
  • 13 Replies
  • 224 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by anthonyragland
Member Avatar for 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

Member Avatar for 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

Member Avatar for roryt

I'm glad I could help.

Member Avatar for 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.

Member Avatar for 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

Member Avatar for MidiMagic

It helps to be looking at the right file.

Member Avatar for roryt

The link is now broken.

Member Avatar for 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.

Member Avatar for anthonyragland

Interesting. What are you suggesting I change them too?

Member Avatar for 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.

Member Avatar for 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.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.