Jump to content
Nathan

How to Center a Footer

Recommended Posts

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

 

 

Share this post


Link to post
Share on other sites

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 by Danny.Domb

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites
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 by Danny.Domb

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • Create New...