Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS best way to center website?

  • This topic is empty.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #26186
    Makeshift
    Member

    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.

    Code:
    body {
    text-align: center;
    }

    but, it’s never worked well.

    i’ve also tried

    Code:
    div#pagewrap {
    margin: 0 auto;
    }

    it works well, but not for IE users.

    and i’ve also tried

    Code:
    content

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

    any ideas guys?

    #64442
    KaizenNeko
    Member

    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.

    #64443
    Makeshift
    Member

    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.

    #64445
    TheDoc
    Member

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

    #64463
    Makeshift
    Member

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

    #64476
    GPirie
    Member

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

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

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

    #64481

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

    #65039
    sherrikhan
    Member

    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

Viewing 8 posts - 1 through 8 (of 8 total)
  • The forum ‘CSS’ is closed to new topics and replies.