html – How can I make my footer center to the bottom of the page?

html – How can I make my footer center to the bottom of the page?

Just set width to 100%

width: 100%;

Shabbir Lakdawala answer is one of your option but encase you have floated element inside your footer just add div wrapper

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; }

working demo

html – How can I make my footer center to the bottom of the page?

OR You can give your footer a container 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 Fiddle : http://jsfiddle.net/qdVbR/174/

Leave a Reply

Your email address will not be published.