Member Avatar for debasishgang7

I am Trying to design a footer which will Always be in the center bottom of a page.The dynamic page i am working with is Extending as visitors are posting new comments.And after a certain time the footer is getting overlapped by comments posted.How can i design a footer which will never overlapped by the dynamic page content.??
Here is my Footer:

<div id="text1" style="position:absolute; bottom:0px; overflow:hidden; width:1075px; height:43px; z-index:2; background-color:#993300">
My footer content.!!!!!!
</div>

which attributes of the div tag should i change to do the desired job..??

  • 4 Contributors
  • 3 Replies
  • 132 Views
  • 5 Days Discussion Span
  • Latest Post Latest Post by teedoff

Dani AI

Generated

Root cause: the footer in 's sample is removed from the normal document flow (absolute/fixed), so new comments can render “under” it and visually overlap. Raising z-index (as suggested) only changes stacking order — it hides content instead of keeping the footer below it — so it is not a true fix. Two reliable solutions follow.

Modern, simplest: make the page a column flex container so the content area grows and the footer stays at the bottom when content is short and naturally follows when content is long.

<div class="page">
  <main class="content">...comments...</main>
  <footer class="site-footer">Footer</footer>
</div>
html, body { height: 100%; margin: 0; }
.page { min-height: 100vh; display: flex; flex-direction: column; }
.content { flex: 1; }          /* fills available space */
.site-footer { height: 60px; } /* fixed footer height helps spacing */

If you cannot refactor to flexbox, keep the footer fixed/absolute but prevent overlap by giving the content area bottom padding equal to the footer height:

.content { padding-bottom: 60px; }   /* leave room for the footer */
.site-footer { position: fixed; bottom: 0; left: 0; right: 0; height: 60px; }

Troubleshooting checklist (as asked for more info): confirm the footer is after the comment container in the DOM, remove position:absolute unless deliberately needed, verify computed heights with browser DevTools, and ensure html/body heights are set when using min-height/100vh. If problems persist, post the full page wrapper and CSS so the layout interaction can be inspected.

Recommended Answers

All 3 Replies

Member Avatar for Ritesh_4

have u manage to solve it? else try follow example on this link:

Member Avatar for ko ko

Set the highest value for the z-index of the sticky footer.

Member Avatar for teedoff

You mean a sticky footer? or a footer that always remains attatched to the very bottom of your content no matter how long it is?


Either way, gonna need to see more than 4 lines of your code. Post all your code or better a live link to your site.

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.