WordPress.org

1. Pommes
   Member
   Posted 7 months ago #

   Hey there, not sure if it is the right place for this but i'll just try it.

   I just created a wordpress template and i have some issues with my footer.

   I just cant make it stick to the bottom without overlaying the content.

   I want to have my footer at the bottom, even if i do not have enough content to display. I only get to the point where my footer sticks at the bottom of the page, but if i have more content the footer is stuck in the middle of the text and not at the bottom of the content.

   Does anyone have a simple trick how to do that?

2. peredur
   Member
   Posted 7 months ago #

   Clear floats, probably, but it's hard to see without being able to see your site. If you could supply a link it would help. We can then look at the html/css and, hopefully, make some suggestions.

   Bear in mind, though, that your footer can only ever be displayed after the longest element on your page. This does not necessarily mean at the bottom of the viewport. Because viewport heights vary so much, it is pretty much impossible to get a foooter always to stick to the bottom of the viewport---without causing lots of other problems.

   HTH

   PAE

3. mebox
   Member
   Posted 3 months ago #

   @Pommes ;

   Hey brother try this way, i guess this is the answer for your question .
   Make changes as below, to your STYLESHEET ( .CSS ) file .

   1. First edit the CONTAINER

   #container { width: 100%; margin-left: auto; margin-right: auto; padding: 10px 10px; margin-top: 20px; margin-bottom: 60px; }

   ( Change margin, padding as you want )

   2. Then edit the FOOTER ( in your .CSS file, not the footer.php )

   #footer { position: fixed; clear: both; width: 100%; height: 60px; bottom: 0; padding: 20px 0 0 0; text-align: center; color: #CCCCCC; background-color: #333333; }

   ******** Then edit the FOOTER.PHP file ( inside your theme directory )

   <div id="footer">
   <p style="padding: 0; "> Your name / copyright info goes here . A mebox© work .</p>
   ( Edit the text as you want )

   </div>

   Thanks .
   [signature moderated]

Reply

You must log in to post.