Why isn't this DIV centered?

Question

I have a DIV that I want to keep centered and docked to the bottom of the page. I've pretty much achieved that except that it lists to the right. I've setup a jsFiddle to demonstrate the problem.

I suspect that I need to adjust margins but so far my attempts have been fruitless. I tried adding:

margin: 0;

but nothing. What am I missing?

The div is 100% wide...how would it not be centered? Are you referring to the anchor links? — Paulie_D, Feb 25 '14 at 16:41

score 3 · Answer 1 · answered Feb 25 '14 at 16:42

If you mean the little bit of space to the left, then I would think adding left: 0; would solve the problem.

#footer { 
    position: fixed; 
    bottom: 0; 
    width: 100%;
    border: 1px solid red;
    text-align: center;
    margin: 0;
    left: 0;
}

You need to watch though because you are setting the width to be 100% and also setting a border which makes the div wider than 100%.

score 3 · Answer 2 · answered Feb 25 '14 at 16:43

3

I suspect this is the default margin/padding on the body

body {
    margin: 0;
}

will fix it.

answered Feb 25 '14 at 16:43

Paulie_D

107,962
13
142
161

score 2 · Answer 3 · answered Feb 25 '14 at 16:44

2

Remove border: 1px solid red; and add left: 0; to #footer.

Here is the JSFiddle.

answered Feb 25 '14 at 16:44

Kai Feller

653
3
14

score 2 · Accepted Answer · answered Feb 25 '14 at 16:50

You need to set left to 0 (zero) and box-sizing to border-box!

Check this: http://jsfiddle.net/pR4P5/7/

#footer { 
    position: fixed; 
    bottom: 0; 
    width: 100%;
    border: 1px solid red;
    text-align: center;
    margin: 0;
    box-sizing: border-box;
    left:0;
}

Have a nice day,

Alberto

Marcel · Answer 5 · 2014-02-25T16:56:31.480

Change the width: 100% to

left: 0;
right: 0;

So it would become: http://jsfiddle.net/pR4P5/6/

Complete CSS:

#footer {
  position: fixed; 
  bottom: 0; 
  left:0;
  right: 0;
  border: 1px solid red;
  text-align: center;
  margin: 0;
}

Result would be 100% width while you can keep your border of 1px. Note when defining width 100% and adding a border you might be better of adding box-sizing to it. Also, margin: 0; to body is a great way to avoid headaches.

(box-sizing: content-box; - http://quirksmode.org/css/user-interface/boxsizing.html)

score 1 · Answer 6 · answered Feb 25 '14 at 16:52

Try replacing margin: 0; with left: 0;. This should lock the div onto the left of the page, centering it. I would also not use a border, that will add on some pixels to the width and height, making it less centered. I would instead use only border-top: 1px solid red;.

Hope I helped you solve your annoying problem.

score 1 · Answer 7 · answered Feb 25 '14 at 16:52

1

Paulie_D's answer is correct you need to add margin: 0 to the body. I'd imagine you think its not properly centred because of the border on the footer.

Try adding:

box-sizing: border-box;

to your footer element.

answered Feb 25 '14 at 16:52

Paul. B

1,328
1
13
22

Arbel · Answer 8 · 2014-02-25T17:06:16.763

To Center the div:

html, body {
    margin:0;
    padding:0;
    width:100%;
    height:100%;
}

To keep the borders included in the positioning, too:

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

DEMO: http://jsfiddle.net/pR4P5/8/

Read More at:

CSS Reset: http://meyerweb.com/eric/tools/css/reset/

box-sizing: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

Why isn't this DIV centered?

8 Answers8