Geek Answers Handbook

How can I make the center of the footer at the bottom of the page?

I'm having trouble centering the footer at the bottom of the page. Here is my code

footer { background-color: #FFF; position:fixed; bottom: 0px; width: 400px; text-align: center; } <footer align="center"> <p>March 25, 2</p> </footer>
+8
html css center web footer
source share
3 answers

Just set the width to 100%

 width: 100%;
+13
source share

Shabbir Lakdawala's answer is one of your options, but conclude that you have a floated element inside your footer , just add a wrapper 'div'

HTML

 <div class="footerWrap"> <div class="footer"> <div class="footerContent"> <p>Lorem Ipsum dolor</p> </div> </div> </div>

CSS

 .footerWrap { width:100%; position:fixed; bottom: 0px; } .footer { width:400px; margin:auto; } .footerContent { float:left; width:100%; background-color:#555; padding:20px 0; } .footer p {float:left; width:100%; text-align:center; }

demonstration works

+1
source share

OR You can provide a container with a footer and apply this code:

HTML:

 <footer> <div class="footer"> lorem ipsum dolor </div> <footer>

CSS

 footer{ bottom: 0; position: fixed; width: 100%; } .footer { background: blue; height: 100px; margin: auto; width: 400px; text-align:center; padding:10px; color:#ffffff; }

Link to the script: http://jsfiddle.net/qdVbR/174/

0
source share

More articles:


All Articles