How to Center a Footer

[Nathan]

On one of my projects I was trying to figure out how to center my footer div.  It was after all the content, but I wanted to center it with the width of the center content and not overlap the sidebars.

 

Took me quite a while to figure it out so here it is:

 

.footer{
    position:fixed;
    bottom:0;
    left:50%;
    margin-left:-200px; /*negative half the width */
    background:red;
    width:400px;
    height:100px;
    z-index:999;
}

 

 

[KMRock]

Cheers I've never attempted this as I have had no idea. Thanks for the share .

[webdevuser]

On one of my projects I was trying to figure out how to center my footer div.  It was after all the content, but I wanted to center it with the width of the center content and not overlap the sidebars.

 

Took me quite a while to figure it out so here it is:

 

.footer{
    position:fixed;
    bottom:0;
    left:50%;
    margin-left:-200px; /*negative half the width */
    background:red;
    width:400px;
    height:100px;
    z-index:999;
}

 

Personally, I would have done something similar to : http://jsfiddle.net/WHqRe/

 

Since it would be very easy to adapt it for responsive design, and using position for a main element of your design are not good practices... (It may not have the same effect on all browsers)

Edited January 15, 2013 by Danny.Domb

[Isabellas2007]

Thank you for the great information here! I do not really use a footer that much, but when you do need to use it, it is impossible to find the information that you need to have! 

[themdno]

I usually use the margin auto method to center things like this, but without looking into the overall code, I wouldn't know if that would do exactly what you're looking for. You're solution is good though, it's very close to what i use all the time.

[Victor Leigh]

Just curious. Is the 'left: 50%' the controlling factor for the placing of the footer in the code shown?

Edited January 17, 2013 by Victor Leigh

[webdevuser]

Just curious. Is the 'left: 50%' the controlling factor for the placing of the footer in the code shown?

 

.footer{
    position:fixed;
    bottom:0;           /* Place the footer on the bottom of the page */
    left:50%;           /* Place the top left corner at 50% of the page width */
    width:400px;        /* Determinate the width of the footer */
    margin-left:-200px; /* Renomve half of the width so, instead of the top left corner is at 50% exactly half of the content is set to a positon of 50% of the page width */
    z-index:999;        /* Since positioning with the element position set the element over or under anything (the position is fixed on the page instead of being place under the last element) the z-index determinate which element is shown over which (the most higher z-index is the top priority)
}

That is why again, I strongly recommend to do not use positioning since the result is strongly relative to the screen of the user and the content length of the website.

Edited January 17, 2013 by Danny.Domb

[Victor Leigh]

Hmmm, is there a command in php which will read the width of the screen automatically?

[DarkGizmo]

Ah glad ya got it sorted Nate. Actually came to post a solution to this for you but glad you got it fixed.

[BarryLejieg]

I think you could use a simpler way. For example you may insert the footer inside the main container as the last element of course and apply something like this:

.footer {
width:inherit;
text-align:center;
padding:5px;
color:#e3e3e3;
font-size:12px;
}

 

It's really simple and if you look carefully the first two lines are doing all the work you need.

[webdevuser]

Hmmm, is there a command in php which will read the width of the screen automatically?

 

Not in php (Since php is a server side language and not a client one), but using javascript or jquery it would be fairly easy.

 

But using pixels to create a design is not the best options, using % is much better or you could use a fixed width grid system =P In either case, it is base on % to always maximize the information that can be seen.

[OhioTom76]

I always keep this page bookmarked, because I come back to this technique very often:

 

http://matthewjamestaylor.com/blog/beautiful-css-centered-menus-no-hacks-full-cross-browser-support

 

If you are doing a fixed width layout, it's pretty simple to center the footer. You just apply a margin of "auto" to the left and right sides of the containing DIV, as mentioned earlier on here. But if you are doing more fluid layouts, and *especially* if your header, footer, whatever has floated content, sometimes you need to use something more complex such as in the link above.