Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New to the CF scene
    Join Date
    Aug 2005
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    How to center the entire page with css?

    text-align: center; --- it works in Firefox but not IE, so that is out of the question. How on earth can i do it without creating a table? Right now, I use the table method, but I dislike tables

    Any help would be appreciated

    Thanks

  • #2
    Regular Coder
    Join Date
    Jul 2005
    Location
    Halifax, Nova Scotia, Canada
    Posts
    392
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Say you have a main content div right? We'll call it <div id="main">. Try this.

    #main {
    margin: 0px auto;
    }
    Once I thought I was wrong but I was mistaken.

  • #3
    New to the CF scene
    Join Date
    Aug 2005
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you for your speedy reply

    Well, I removed the table and tried the codes you gave me. Unfortunately, they did not work in IE, but maybe the problem is in my part. I could've perceived you reply wrong.

    My goal is to center a webpage on the screen without the usage of a table. Right now, I have "<table align="center"> to do this, but as I said, I dislike to use any form of table.

    Quote Originally Posted by Tristan Gray
    Say you have a main content div right? We'll call it <div id="main">. Try this.

    #main {
    margin: 0px auto;
    }
    Does that only center one div? Is it possible to center my entire page?

    Thanks again!

  • #4
    Regular Coder Ranger56's Avatar
    Join Date
    Mar 2005
    Location
    Kent, WA.
    Posts
    783
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by firstwave
    Thank you for your speedy reply

    Well, I removed the table and tried the codes you gave me. Unfortunately, they did not work in IE, but maybe the problem is in my part. I could've perceived you reply wrong.

    My goal is to center a webpage on the screen without the usage of a table. Right now, I have "<table align="center"> to do this, but as I said, I dislike to use any form of table.



    Does that only center one div? Is it possible to center my entire page?

    Thanks again!
    Just put all the info for your page in it.
    Code:
    <html>
    <body>
    <div id="main">
    
    all junk goes here
    
    </div>
    </body>
    </html>
    Yes i know that code sucks

  • #5
    Regular Coder
    Join Date
    Aug 2004
    Location
    The US of A
    Posts
    767
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Code:
    * html {
    text-align: center;
    }
    
    #main {
    width: /*insert width here*/
    margin: 0 auto;
    text-align: left;
    }
    That'll center your content in IE, Moz/FF, Opera, and Safari.

  • #6
    Regular Coder
    Join Date
    May 2004
    Location
    Minneapolis, MN, USA
    Posts
    904
    Thanks
    0
    Thanked 0 Times in 0 Posts
    A method that works without hacks but requires a fixed width:

    #containerToCenter {
    width: [yourWidth]
    position: absolute;
    left: 50%;
    margin-left: -[yourWidth/2]
    }

  • #7
    Regular Coder
    Join Date
    Jul 2005
    Location
    Halifax, Nova Scotia, Canada
    Posts
    392
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I prefer fixed widths anyway because at crazy high resolutions it can be better to just have it not take up as much of the browser window otherwise things can become really unreadable or ugly. That being said 760px wide isn't very big on 1280x1024. But I still prefer the 'print-style' layout.
    Once I thought I was wrong but I was mistaken.

  • #8
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    Make sure you have a decent DOCTYPE, otherwise IE won't play nice with things like "margin: 0 auto;". (I think) the hacks are only needed for IE 5...

  • #9
    Regular Coder
    Join Date
    May 2004
    Location
    Minneapolis, MN, USA
    Posts
    904
    Thanks
    0
    Thanked 0 Times in 0 Posts
    That is correct. IE 6 will do auto margins right under the right conditions, whereas the archaic crap that is IE 5 needs some help.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •