Member Avatar for saucy6969

Hi there
I am coming across a few issues with my new website and I managed to solve all but one now.
On pages that have long text, the footer is showing up in the text.
anyway to move it so it stays put???
(http://home.comcast.net/~waynetorrance/roomies/index.html)
and the example of the footer issue is: (http://home.comcast.net/~waynetorrance/roomies/history.html)

  • 4 Contributors
  • 5 Replies
  • 228 Views
  • 3 Hours Discussion Span
  • Latest Post Latest Post by JorgeM

Dani AI

Generated

Short, practical follow-up based on the thread: correctly identified the immediate cause — the main wrapper was constrained to a fixed height so long pages overflow into the footer. Additional common causes are an absolutely/fixed-positioned footer, floated content that isn’t cleared (making the wrapper’s height collapse), negative margins, or z-index/positioning that pulls the footer into the content flow. ’s prompt about how the footer is defined was on point, and ’s pointer to CSS fundamentals is a good next step for anyone new to layout concepts.

Quick checklist for debugging and fixing (use DevTools to test changes before editing files):

  1. Inspect the wrapper and footer in DevTools; check computed styles for any height, position, float, or overflow rules. Temporarily uncheck suspicious rules to see immediate effects.
  2. If floats are used inside a container, make sure the container clears them so its height expands with content. One safe clearfix pattern is:
/* clearfix for a container that holds floated children */
.container::after {
  content: "";
  display: table;
  clear: both;
}
  1. If the footer is absolutely or fixed positioned and overlapping content, prefer a flow-based layout (so the footer sits after content) or add appropriate spacing to the content area — but flow-based is cleaner.

Modern, robust sticky-footer pattern (keeps footer at bottom for short pages, and below content for long pages) using Flexbox:

html, body { height: 100%; margin: 0; }
.site { min-height: 100vh; display: flex; flex-direction: column; }
.site main { flex: 1; }

Place header/main/footer inside .site; main takes remaining space. Finally, test across viewports and older browsers if support is required; if legacy support is needed, use the clearfix/negative-margin patterns instead of Flexbox.

Recommended Answers

All 5 Replies

Member Avatar for hericles

How are you defining the footer area in your CSS? And the div that holds the contents - is the height fixed at a set height or auto?

Member Avatar for jwmollman

On your main <div> wrapper, you're defining a fixed height, so when your text exceeds that 1226px limit, it gives you the "leaking" footer into the main <div>.

You can either remove or comment out the height property in your CSS file and it will be fixed.

#main {
    background-color: white;
    width: 1140px;
    /* height: 1226px; */
}

I tried this using Developer Tools in Chrome on your site and by taking out the height property, it fixed the problem.

Edited by jwmollman because: Fixed code formatting on HTML tags
Member Avatar for saucy6969

...thanks so much! that worked perfectly. i figured it had something to do with a height issue but wasnt sure...css is not my strong point.
genius!

Member Avatar for jwmollman

Glad I could help! CSS just clicked for me one day. I just practice with HTML and CSS by making simple layouts and then built upon them on my free time and that's how I get better at it.

For me, I just let <div>'s fill up with whatever content they contain. In all my layouts, I never really used fixed heights, only fixed widths.

Member Avatar for JorgeM

, jwmollman described it very well. CSS just "clicks" once you sit and learn the basics. When you get comfortable with CSS, you'll wonder why you didnt take the time to learn it before you spent all that time using deprecated HTML tags for styling....it happens to all of us. Here is a basic overview of CSS: http://www.itgeared.com/articles/1271-how-to-use-css-tutorial-guide/

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.