Member Avatar for andreiviziru

so i have the following css stylesheet and i want that #footer{} and #copyright{} to stay at the bottom of the page all time. How can i achieve that?

  • 4 Contributors
  • 3 Replies
  • 279 Views
  • 2 Hours Discussion Span
  • Latest Post Latest Post by almostbob

Dani AI

Generated

Short summary and recommended approach (builds on , and ):

The common causes here are using absolute/fixed positioning that takes the footer out of the document flow, or keeping layout in tables and using deprecated attributes. A modern, robust pattern is to make the page a column flex container so the main content expands and the footer naturally stays at the bottom when content is short — no positioning needed and no overlap with content.

/* page layout: footer stays at the bottom without positioning */
html, body { height: 100%; margin: 0; }
body { display: flex; flex-direction: column; min-height: 100vh; }

.main { flex: 1 0 auto; }    /* content grows to push footer down */
footer.site-footer { padding: 12px; background: #f4f4f4; text-align: center; }
<body>
  <main class="main">…page content…</main>
  <footer class="site-footer">© 2013 — copyright inside footer</footer>
</body>

Troubleshooting checklist and notes:

  • If the footer must be visible pinned to the viewport (always on screen), use fixed positioning but avoid overlap by adding equivalent bottom padding to the content area (or measure footer height and set padding dynamically).
  • Ensure body has margin: 0 and a standards DOCTYPE to avoid quirks-mode layout issues.
  • Keep copyright inside the footer element (as suggested) and stop using table layout/align for page chrome.
  • Use plain 0 for zero-valued lengths (no units) as noted.
  • On older mobile browsers position: fixed can behave inconsistently; prefer the flex approach for page-footers and use JS only for special cases.

This approach is simple, semantic, and works across modern browsers without pulling the footer out of the document flow.

Recommended Answers

All 3 Replies

Member Avatar for Dani

It should already be working, no?

#footer
{
    position: fixed;
    bottom: 0px;
    left: 0px;
}

That should do the trick?

Member Avatar for JorgeM

You still have the CSS for your footer set to position:absolute. As Dani pointed out, change it to fixed.

Also, I assume that you want your copyright div to be included within one footer...

<div id="footer" style="text-align:center;">
 <table align="center">
    <tbody>
     <tr>
      <td><p class="footer_heads">Social</p><hr></td>
     </tr>
    </tbody> 
  </table>
  <div id="copyright">
    <p class="small">Powered by ..... [more html] ... © 2013</p>
  </div>
</div>

Here a screenshot. I still dont think your footer is correctly formatted with regard to the copyright, but you may have a better idea know.

b06b3c576984e6a687c66680f990a151

By the way, the attribute "align" has been deprecated and is not supported in HTML5. You should use CSS properties instead.

Edited by JorgeM
Member Avatar for almostbob

0px 0em 0% 0pi 0cm 0in are equally incorrect and may cause some browser/OS combinations to display improperly
zero is dimensionless
0pt = 0px = 0em = 0% = 0pi = 0cm = 0in = 0
1pt <> 1px <> 1em <> 1% <>1pi <> 1cm <> 1in

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.