How can I centre my blog?

Have a look at http://www.jw-enterprises.co.uk/

For some reason it loads in the centre then moves over to the left. Can you see anything in the CSS that is making that happen?

Many thanks for any help. I've been trying to fix this for months now.

James.

 

Before

<!-- begin header -->
<div id="header">

Code (markup):

put

<div style="width:1024px; padding: 0px; margin: 0px auto;">

Code (markup):

and after

<!-- begin footer -->
<div id="footer">
    Copyright &copy; 2011 <a href="http://www.jw-enterprises.co.uk">JW Enterprises SEO Services</a>. All Rights Reserved.<br />
JW Enterprises SEO Services, Ground Floor, Gothic House, Barker Gate, Nottingham NG1 1JU. Telephone 0115 9400 899.
</div>

Code (markup):

add

</div>

Code (markup):

or if you want to use CSS add this

#header {width: 1024px; margin: 0px auto;}
#mainwrapper {width:1024px; margin: auto;}
#footer {width:1024px; margin: auto;}

Code (markup):

That should center your blog.
If you need more help feel free to PM me.

That should center your blog.

Ah, yes, and remove "width:1024px;" form body.

 

I would suggest removing a defined width. People viewing your page with less than 1024 width will have to scroll horizontally.

I generally set all my containers to 96% width. That gives you a nice margin on each side of your window. Then use the suggested margin: 0 auto;

 

it didnt work

 

Just use text-align:center it will center you blog but you have to mention text-align:left on other div tags.Hope this helps.

 

In the css file add this to the body:

width: 100%;
margin: auto auto;
position: relative;

 

No its still going over to the left...

 

K so remove what I said before, what you would do is add a wrap see this image http://www.studiopress.com/images/gen_markup.png the code would look like this

#wrap{
width: 1024px;
margin: auto auto;
}

Then put the div directly under the body opening div it should be in the header.php file

<div id="wrap">

Then close it in the footer.php file just before the body close div </div> that should sort it for you.

 

So what if the screen size is differnet to 1024?

I don't know why its so difficult to get this to centre!

 

Its because your site is in the body all the elements are stuck to that, if you added a wrap to hold all the elements you can position that like in the image I posted http://www.studiopress.com/images/gen_markup.png the dark outside is the body, you have no wrap to hold the rest you could position the different divs but it is easier to add a wrap.

Then you gotta position the header, footer, nav and sub nav if you added a wrap to hold all of that you just have to position it. I spent all day a week ago trying to figure that for a site, save a copy of the css file before you mess with it but if you look at that image the outside dark part is where your site is stuck you want to add the wrap just inside that to catch it all.

 

OK, the quick and dirty way: add margin:0 auto; to the body element, which currently has margin:0;, that should centre it. Let me know if you have any problems.

Jeremy

 

If thats right ill be sickened it's what I was going for in my 1st post I spend all day on a site trying to set it right and have this in the body

just left out the 0!

 

what didn't work? The example I gave you is correct and should work.

 

check your css, the whole page content is floating to the left.

 

For your CSS

margin-right: auto;
margin-left: auto;

Where ever that applies, IT will be center regarding on your width of the DIV selected.

 

I haven't seen any of the container in the css code create a div ID
#container{
margin:0px auto;
width:100%
}

each and every tag should fall inside the container tag an you will see the blog will be centered

 

The structure is messed up and css style isn't neat
you should fix it up first dude..

 

This should really work. Try this:

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

 

I have a same problem with my css style sheet. I will try to appluy code as above.

 

Great share Thanks