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
  • 235 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by anthonyragland

Dani AI

Generated

Quick summary and a practical follow-up to what the thread discovered: common causes for a footer that "floats" above the bottom are broken HTML (unclosed or mis-nested tags), layout blocks removed from normal flow (e.g. position:absolute), floated columns that collapse the wrapper, or scripts that insert content after the footer. ’s validation suggestion and ’s cleanup were exactly the right first steps, and ’s note about dynamically injected content is a good catch for later-stage bugs.

A modern, robust fix (recommended)

html, body { height: 100%; margin: 0; }
body { display: flex; flex-direction: column; }
main { flex: 1; }    /* main content stretches */
footer { /* normal footer styling */ }

This keeps the footer at the bottom of the viewport when content is short and pushes it down as content grows. It is simple, requires no clearfix hacks, and is the least brittle approach for current browsers.

Fallbacks and fixes for float/legacy layouts

.container::after {
  content: "";
  display: table;
  clear: both;
}

Use that clearfix on the wrapper so floated columns do not collapse it. As a last resort, overflow:auto on the wrapper can force containment but may introduce unwanted scrollbars. Avoid using position:absolute for main layout blocks—the absolute element is removed from document flow and will not push the footer.

Quick debug checklist

  • Validate HTML and check for mis-nested or missing closing tags.
  • Inspect computed position and height in DevTools; temporarily add borders to visualize flow.
  • Search for position:absolute on large wrappers and for scripts that append nodes after the footer; move injections inside the main wrapper.
  • If supporting very old browsers, combine clearfix or the negative-margin sticky-footer pattern as a fallback.

These steps should prevent regressions and make the footer behavior predictable across content lengths and browsers.

Recommended Answers

All 13 Replies

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 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

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.