How do I center my website?

I can't seem to center my website using CSS, can someone please advise?

 

Uncommenting "<div style='width: 1000px; margin: 0 auto;'>" does the trick. Was that just in there for testing?

 

Haha, thanks for finding that... must have been from ages ago.

Doesn't that look wrong in IE6?

Test page

 

Guess what? Disregard what I just said. I took a look again, and I think the issue is actually improperly nested div tags. (Sorry!)

First, the html:
<!-- Notice how I moved the wrapper_parent -->
<div id="wrapper_parent">

<div id="main_container">
<div id="banner">
<!--<a href="/" title="Andy Murray"><img src="/img/banners/mw_banner.jpg" width="977" height="70" alt="Andy Murray" /></a></div>-->
<a href="/"><img src="/img/banners/xmas-banner.jpg" width="977" height="70" alt="Andy Murray Tennis News" /></a></div>
</div>
.......
.......


<!-- Footer -->
<div class="footer"></div><!-- /Footer -->

<div class="footer2">
Copyright &copy; 2005-2008 MurraysWorld.com, all rights reserved <br /> <a class="light" href="mailto:admin[at]murraysworld.com">Contact Us</a> | <a

class="light" href="http://feeds.feedburner.com/andy-murray-news" rel="alternate" type="application/rss+xml">News RSS</a> | <a class="light"

href="/media/" rel="nofollow">Media Enquiries</a>
</div>
</div><!-- /Wrapper Parent -->

</body>
</html>

______________________

As for the CSS:

#wrapper_parent should look like this:

#wrapper_parent{
position: relative;
background-color: #FFFFFF;
text-align: left;
padding: 10px;
border: 5px solid #B6CBB7;
height: auto;
margin:0 auto;
width: 957px;
}

".footer2" - Remove "float:left;" and use "clear:both;".

Try that and see if it works. Let me know if it doesn't.

 

Okay, stay with me on this one: I looked at it again, and I think I moved the wrong div. (There's a lot of markup there and I missed it when I was looking.) Turns out the answer's much simpler:

<div id="main_container">
<div id="banner">
<!--<a href="/" title="Andy Murray"><img src="/img/banners/mw_banner.jpg" width="977" height="70" alt="Andy Murray" /></a></div>-->
<a href="/"><img src="/img/banners/xmas-banner.jpg" width="977" height="70" alt="Andy Murray Tennis News" /></a></div>
</div> <---- See this div? It needs to be moved to just before the </body> tag.

Really sorry if that threw you off too much. So, in a nutshell, move that, and the original layout should be fine. Also, I forgot to mention that you should add "text-align:center;" to the body tag for IE. It's the only way it recognizes centering a div. Then, on the next div down, reset the text to be "text-align:left". Hope that helps! Sorry again.

 

I'll take a look, but did you see the last post?

 

html{
margin: 0 auto;
padding: 0;
}

*{
margin: 0 auto;
padding: 0;
{
Should reset the browser and be centered.

Also just wanted to say your code is a total mess. its all over the place. You have css styling within the html document so why have a css style sheet in the first place . Oh well keep up the bad coding practices

 

designz: That code on its own did nothing.

ketendarcy: Can you look now? I did the change in your last post and also did the CSS change. It works in IE7/8 but is completely broken in Firefox and in IE6 the banner div looks a bit out of place.

 

I'm looking at it now. Sorry again for confusing you! : )

 

Where do I have inline css?

Thanks, very kind of you

 

Okay, now that I've completely confused you (and me : )...

This is what I have in the CSS starting at the body declaration and going through ".footer2", along with the last post I made about moving the closing tag to before the </body> tag:

body {font-family: Arial, Helvetica, sans-serif; font-size: 12px; margin: 0px auto; background-repeat: repeat-x; /* background-color: #F2F2F2; */

background-image: url(img/bg.jpg);text-align:center;}
a img {border: none;} form {display: inline;}
p {margin: 0px; padding: 0px; margin-top: 14px;}
hr {border: 1px solid #CCCCCC; margin-top: 4px; margin-bottom: 4px;}

/* ########################################################################## */

/* -- Content -- */

#main_container {width:977px;margin: 0 auto;margin-top:10px;}

#banner {height: 75px; width: 977px; display: block; position: relative;border: 5px solid #B6CBB7;}
#contentwrapper {float: right; width: 542px; margin-top: 0px; height: 100%; float:left;
margin:0px -800px 0px 155px; overflow: hidden; border: 1px solid #E1E1E1; padding: 3px;}
#imagegallery {float: right; width: 794px; margin-right: 0px; overflow: hidden; border: 1px solid #CCCCCC; padding: 3px;}
#newswrapper {width: 550px; margin-top: 0px; height: 100%; float:left;
margin:0px -800px 0px 155px;}
.footer {float: right; font-size: 10px; color: #666666; padding-right: 250px; text-align: center;}
.break {border: 1px solid #CCCCCC; margin-top: 4px; margin-bottom: 4px;}

#wrapper_parent {
position: relative;
background-color: #FFFFFF;
text-align: left;
padding: 10px;
border: 5px solid #B6CBB7;
height: auto;
float:left;
width: 957px;
}

.footer2 {
position: relative;
text-align: center;
font-size: 10px;
background-repeat: no-repeat;
background-position: right bottom;
margin: 0px auto;
width: 875px;
padding-top: 5px;
height: auto;
clear:both;
color: #666666;}

I tested it in IE7, FF2, FF3, and will take a look at it in IE6. Let me know how it works!

 

Thanks a lot, now seems to be working in all those browsers.

1) It seems to indent to the right by about 10-20px, shrink your browser and you'll see what I mean.

2) Please tell me if it works in IE6 for you? I'm using a multi browser app and it is broken in IE6 on that but using the NetRenderer website, it is not so bad.

 

why not just try the center tag <body><center>code of your body</center></body or <center><body>code of your body</body></center>?

 

Okay, first the fix:

Add "display:inline" to these elements: "contentwrapper", "newswrapper", and "rightbar_wrapper". That should work fine in IE6, as well as the other browsers.

Now, why is that needed? Well, (and ignore this if you already know, but), IE6 has a float bug. Basically, if you set a margin to whatever side you floated an element to, it will double it. For instance, say you have this declaration:

p{float:left;margin-left:10px;}

In IE6 that's rendered as "margin-left:20px;". However, "display:inline" is a known fix for the bug that I often use. (It just took me a bit to figure out what the issue was in the code.)

Sorry again if I confused you too much earlier. Hope everything works out for you. If you have any further issues, feel free to let me know. (That is, if you're not too scared! : ) Take care.

 

Firstly, have you noticed that on FF and IE, it isn't perfectly center? It seems to be about 10-20px to the right.

Before your fix: Perfect in IE6 (NetRenderer website), broken in IE6 (multi-browser application).
After your fix: Broken in both.

So maybe keep it the same? But first I need to know for sure it looks right in IE6 because I get two conflicting messages. At the moment I have your most recent edit done.

 

Here's the final CSS that I changed:

#main_container {width:977px;margin: 0 auto;margin-top:10px;}

#banner {height: 75px; width: 977px; display: block; position: relative;border: 5px solid #B6CBB7;}

#contentwrapper {float: right; width: 542px; margin-top: 0px; height: 100%; float:left;
margin:0px -800px 0px 155px; overflow: hidden; border: 1px solid #E1E1E1; padding: 3px;display:inline;}

#imagegallery {float: right; width: 794px; margin-right: 0px; overflow: hidden; border: 1px solid #CCCCCC; padding: 3px;}

#newswrapper {width: 550px; margin-top: 0px; height: 100%; float:left;
margin:0px -800px 0px 155px;display:inline;}
.footer {float: right; font-size: 10px; color: #666666; padding-right: 250px; text-align: center;}



.break {border: 1px solid #CCCCCC; margin-top: 4px; margin-bottom: 4px;}

#wrapper_parent {
position: relative;
background-color: #FFFFFF;
text-align: left;
padding: 10px;
border: 5px solid #B6CBB7;
height: auto;
float:left;
width: 957px;
}

.footer2 {
position: relative;
text-align: center;
font-size: 10px;
background-repeat: no-repeat;
background-position: right bottom;
margin: 0px auto;
width: 875px;
padding-top: 5px;
height: auto;
clear:both;
color: #666666;}

.....
.....

#rightbar_wrapper {float: right; top: 10px; padding-bottom: 2px; float:left;
margin:0pt 0pt 0pt 720px;display:inline;}

___________________________

And the HTML:

<body>
<!--<div style="width: 1000px; margin: 0 auto;">-->


<div id="main_container">
<div id="banner">
<!--<a href="/" title="Andy Murray"><img src="/img/banners/mw_banner.jpg" width="977" height="70" alt="Andy Murray" /></a></div>-->
<a href="/"><img src="/img/banners/xmas-banner.jpg" width="977" height="70" alt="Andy Murray Tennis News" /></a></div>



<div id="wrapper_parent">

<!-- News -->
<div id="newswrapper">
....
....

<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script>
<script type="text/javascript">
_uacct = "UA-225883-1";
urchinTracker();
</script>

</div><!-- /Wrapper Parent -->

<!-- Footer -->
<div class="footer"></div><!-- /Footer -->

<div class="footer2">
Copyright &copy; 2005-2008 MurraysWorld.com, all rights reserved <br /> <a class="light" href="mailto:admin[at]murraysworld.com">Contact Us</a> | <a class="light" href="http://feeds.feedburner.com/andy-murray-news" rel="alternate" type="application/rss+xml">News RSS</a> | <a class="light" href="/media/" rel="nofollow">Media Enquiries</a>
</div>

</div>

</body>
</html>
___________________________

Don't know what else to tell you. I'm running all of those locally and tested them there, and they all work fine for me. (IE6, IE7, FF2, FF3, and Safari for Windows.) The only thing I obviously don't have is the images, but I don't think that would effect anything. Is the HTML the same as when you started today, except for the ending tag I said to move? (As shown above.)

About it being 10-20px off: I can't really tell. There are some conflicting declarations in the CSS. I suppose it's possible those are throwing it off.

Hope that makes sense.

 

That seemed to fix the IE6 issue there! Yay

It's now centered on all browsers, huge thanks!

My only issue left is on Firefox, Opera and IE7/8, it is indented to the right by 10-20px. Doesn't sound like much but for people in 1024x res, it is very clear. I might create a new thread on that if I've completely tired you out

 

As a "fix", you could add "margin-left:-5px;" to #banner and #wrapper_parent, which appears to center it. However, I don't think that gets to the root of the problem. If I get some time I'll take a look at it, but I don't think I can do it tonight. (Sorry!) Take care.

 

The hotfix worked and it would be awesome if do get the chance to work out the cause of it.

Thanks a million for your help tonight!!!!

 

use this
at the html page
<body>
<center>
right your htmkl code table or div base between this
and close this tag before body tag
</center>
</body>