Centering site using CSS

Discussion in 'CSS' started by krynnmaliki, May 21, 2006.

0
  1. #1
    I use included files for my header and footer. I am unable to get my pages to center. I have tried throwing the cneter comands around many differant ways but I can never get more than the header, footer, and title to center; then the rest of the page alignes left. I am a Mac user, but i view my page on both a Mac and pc to make sure everything laysout correctly. Can anyone help with a simple or even not so simple way to center all my pages perhaps with an add-on to my CSS library? I can't do live links so visit the URL below to see the site and check out the code or whatever. Thank you,

    http://www.onlinepokerplayersguide.com
     
    krynnmaliki, May 21, 2006 IP
  2. wcwarren

    wcwarren Guest

    Messages:
    40
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #2
    The best way to center a page is to use a 3 column layout. The outside two are set in width and the centre column auto adjusts to the screen size. View my home page for an example:

    Wesley Warren
     
    wcwarren, May 21, 2006 IP
  3. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #3
    Simply wrap the page in a div, or use your existing outer wrapper. 
    
#wrapper {
    margin: 0 auto;
    }
    Code (markup):
    IE will not work unless you have it in standards mode, by using a proper and complete DTD.

    cheers,

    gary
     
    kk5st, May 21, 2006 IP
  4. mavahntooth

    mavahntooth Well-Known Member

    Messages:
    1,064
    Likes Received:
    12
    Best Answers:
    0
    Trophy Points:
    128
    #4
    try to use this.
    <center>
    <body>
    </body>
    </center>
    :D
     
    mavahntooth, May 21, 2006 IP
  5. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #5
    That is invalid markup.

    cheers,

    gary
     
    kk5st, May 22, 2006 IP
  6. icfire

    icfire Peon

    Messages:
    321
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #6
    There is a scroll bar at the bottom for your page...
     
    icfire, May 22, 2006 IP
  7. dna_05

    dna_05 Active Member

    Messages:
    316
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    53
    #7
    i'd use a div container for the whole site with:
    margin-left: auto;
    margin-right: auto;

    and it will hopefully be centered
     
    dna_05, May 30, 2006 IP
  8. carowan

    carowan Peon

    Messages:
    473
    Likes Received:
    24
    Best Answers:
    0
    Trophy Points:
    0
    #8
    I have had the same issue, and resolved it after much frustration, but putting it in its own div, and centering the div.

    What I found was that if it wasn't seperated out, it tended to get clusted with another portion of the site, say the content above it, and take its attributes.
     
    carowan, May 30, 2006 IP
  9. AdamSee

    AdamSee Well-Known Member

    Messages:
    422
    Likes Received:
    28
    Best Answers:
    0
    Trophy Points:
    135
    #9
    body {text-align:center;}/*For IE to center a page*/
    #container {margin:0 auto; text-align:left;}

    <body>
    <div id="container">
    ... Your Code
    </div>
    </body>


    Will create a full centered page.
     
    AdamSee, May 31, 2006 IP
  10. easyresume

    easyresume Peon

    Messages:
    57
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #10
    May I suggest you add an extra div which starts before the header and ends before </body>. Call it wrapper so the XHTML is -

    <div id="wrapper">
    </div> <!-- wrapper -->

    and the CSS is -

    #wrapper {
    text-align: left;
    margin: 0 auto;
    }

    Make sure that you add this line to the body element in the CSS -

    body {
    text-align-center;
    *The rest of your CSS *
    }

    So that it will centre correctly in IE.
     
    easyresume, Jun 5, 2006 IP
  11. mt.bum

    mt.bum Guest

    Messages:
    29
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #11
    Failing to specify the width is the most common mistake when centering blocks of stuff. The css should look like the following:

    margin-left: auto;
    margin-right: auto;
    width: 774px;

    That will work for div and other properties. Choose a width small enough to not create a horizontal scroll bar when viewing at 800 x 600. The width above, 774 pixels, works when there are no other properties squeezing things down. Sometimes a smaller number is needed.
     
    mt.bum, Jun 9, 2006 IP