Container won't centre....Can't work it out

Question

This should be a very simple procedure of putting a container in the centre of the page.

<style type="text/css">
    body{
       margin: 0;
       padding: 0;
    }
    #container{
       width:960px;
       float:left;
       margin:0 auto;
    }
</style>
...
<div id="container">
   Content
</div>

Can anyone tell me why container isn't centered?

Thanks

This question has been asked probably 1000x: http://stackoverflow.com/questions/8445133/html-center-align-not-working http://stackoverflow.com/questions/8412971/working-with-css-to-align-center http://stackoverflow.com/questions/3202612/div-align-center — Christoph, Apr 05 '12 at 15:23
If he sets `text-align: center;` on `#container` he'll center the text in the container. :p — Dissident Rage, Apr 05 '12 at 15:23
It's because I included float:left...the answers below helped me realise this. @Codemonkey the code was in the styles tags, I just removed it for ease on here. Thanks for your replies. Christoph I know it's been answered before and I looked but couldn't work it out! Was the float element. — sark9012, Apr 05 '12 at 15:27
http://stackoverflow.com/questions/5523632/aligning-a-floatleft-div-to-center "you can't centre floats" — Christoph, Apr 05 '12 at 15:30
But it's okay, if it helped you. Just accept an answer and look for answers more thoroughly next time;) — Christoph, Apr 05 '12 at 15:31

MakuraYami · Accepted Answer · 2012-04-05T15:25:12.723

6

margin:0 auto; gives auto margin to left and right and that would make it center.

if its not centered that would be because of the float:left;

edited Apr 05 '12 at 15:25

answered Apr 05 '12 at 15:19

MakuraYami

3,398
3
16
19

Why are you repeating back the title and question in your answer? Please just answer the question and leave the unnecessary stuff out. – James Johnson Apr 05 '12 at 15:23
Because they contradict each other... witch is weird, so i wanted to know what he ment? – MakuraYami Apr 05 '12 at 15:24
It was a typo when I put 'is'...I mean't 'isn't' and removing the float:left fixed this. Thanks for the answer! – sark9012 Apr 05 '12 at 15:25
I know, but it's fairly obvious what the OP is asking for. – James Johnson Apr 05 '12 at 15:26
You're welcome, And flag the answer as correct if it helped you. – MakuraYami Apr 05 '12 at 15:26
Makura, they always foret to do so :) here is an upvote from me at least ;) – rmagnum2002 Apr 05 '12 at 15:27

score 2 · Answer 2 · answered Apr 05 '12 at 15:19

2

Did you mean "isn't appearing"?

Set text-align:center; on body and remove float:left; from #container.

answered Apr 05 '12 at 15:19

Dissident Rage

2,610
1
27
33

Yeah that's what I meant bud. All fixed. Removed the float! Ta. – sark9012 Apr 05 '12 at 15:26
Don't forget the center alignment on the body. Some browsers need that. – Dissident Rage Apr 05 '12 at 15:27
Interesting, which browsers need this? – sark9012 Apr 05 '12 at 15:28

Container won't centre....Can't work it out

2 Answers2