How do you properly center a page with CSS???

Discussion in 'HTML & Website Design' started by Security Camera Warehouse, Jan 1, 2009.

  1. #1
    Hello all,

    I am new to this network. After a long struggle with CSS I have finally broke down and come to seek insight and help on a big problem I have been trying to fix.

    I have Googled, and read and studied about CSS position and div control commands but I just cannot seem to get a handle on making my website look the same in all browsers. I know some of these browsers have so called bugs, but I have a testing page, where I made everything almost perfect.

    The big problem is I cannot stop the web-page from loading the site to the right and having a scroll bar on the bottom, just to see the full site when it loads.

    The link is www dot security-camera-warehouse dot com . /testing/
    If there is any expert that can point me in the right direction or do a small audit on this page, then I can start studying the right material. Thanks a bunch

    -Chad B-
     
  2. DrLakitu

    DrLakitu Guest

    Messages:
    53
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Center the body: in your CSS file :)
     
    DrLakitu, Jan 1, 2009 IP
  3. thefandango

    thefandango Active Member

    Messages:
    787
    Likes Received:
    10
    Best Answers:
    0
    Trophy Points:
    58
    #3
    Did you use a container div wrapped around the content - I believe you can just center that and everything else will sit within it then.

    Or use a table around the outside and stop wrestling with the madness of css .... ;-)
     
    thefandango, Jan 2, 2009 IP
  4. Colbyt

    Colbyt Notable Member

    Messages:
    3,224
    Likes Received:
    185
    Best Answers:
    0
    Trophy Points:
    210
    #4
    I have never validated the code but I know this works with everything from about the 4.0 series of IE and all FF versions.

    In your CSS:

    body {
    text-align: center; /* for IE */
    }

    /*------------------------------- Divs defined----------------------------------*/
    #container {
    margin: 0 auto; /* align for good browsers */
    text-align: left; /* counter the body center */
    }

    Declare all your other stuff to suit your needs.
     
    Colbyt, Jan 2, 2009 IP
  5. Security Camera Warehouse

    Security Camera Warehouse Peon

    Messages:
    6
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    thx guys....the input is really help esp since i am tired of readin books that teach how it is suppose to be done....auditing your code is difficult and this site has gotten so big, that it is going to take for ever to get it right....i will post an update....thx again..

    chad b
     
  6. ideamonk

    ideamonk Peon

    Messages:
    8
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #6
    I usually have a div called wrapper with css like this

    #wrapper {
    width:960px;
    margin:10px auto; /* centers in firefox */
    }

    body {
    text-align:center; /* centers in IE */
    }
     
    ideamonk, Jan 2, 2009 IP