Forums

Makeshift

I've been wondering about the best way to center a website, and I've tried a few different ways to do it.
I've tried.

body {
    text-align: center;
}

but, it's never worked well.

i've also tried

div#pagewrap {
    margin: 0 auto;
}

it works well, but not for IE users.

and i've also tried

<table align=\"center\">
    <tr>
        <td>content</td>
    </tr>
</table>

but i don't like having to use tables unless i have to.

any ideas guys?

KaizenNeko

I've never had a problem using a container DIV and the margin: 0 auto; way. Maybe instead of div#pagewrap, use JUST #pagewrap for your CSS descriptor. The other thing is you'll really never notice the centering unless the wrapper has a width (fixed/flexible) because at 100% it just fills the screen anyway rendering the effect unnoticeable.

Here's a little sandbox page I've made for my code tests. http://dev.infiniteunreality.com/botp/ It's a template I was coding for a site I am redesigning (trying to learn PHP templates to do it) and has a bloody mess of CSS in it, but it's all in plain view to browse through. Also I've tested it against IE5.5 to IE8, Opera, Safari, Firefox 3 and up, and Chrome and with some minor box-model quirks, it's centered fine in all browsers.

The thing I always ran in to with the text-align:center way is that you then have to text-align:left everything else back to get it to look right so I TRY to avoid it since really it's only needed for IE5.5 anyway.

Makeshift

hmm, looks nice. But I don't have a problem with the margin: 0 auto; but IE doesn't do the auto margins, so, it's not good for everyone looking at the website.

TheDoc

Makeshift, I have never heard of IE not accepting the margin: 0 auto; to center a website. I think you might be misinformed.

Makeshift

both my IE tab for firefox and my IE 7 will not display the page as centered.

GPirie

Give your wrap a width as well as the 0 auto trick, so your code will look like this:

#page-wrap { width: 960px; margin: 0 auto; }

It needs a width otherwise it will fill the width of the screen.

Sumeet Chawla

yeah, without a particular width the auto centering thing won't work ;)

sherrikhan

hi, this solution only work with horizonal center, but is there any way to centered the website by height??

so you change your browser it is centered from height too??

is there any way to fix this?

thanks for reading

treehouse : what would you like to learn today?

Forums

best way to center website?