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 4 of 4
  1. #1
    New to the CF scene
    Join Date
    May 2011
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Post CSS Positioning Help

    I'm wondering how to position my website in the middle of someone's browser, in other words there's white space at either side and the website runs down the middle of the page even if someone resize's their browser or has a different size screen.

    Also could someone explain containers too me?

    Any help, tips appreciated

  • #2
    Regular Coder
    Join Date
    Dec 2010
    Posts
    137
    Thanks
    17
    Thanked 6 Times in 6 Posts
    Code:
    margin: 0 auto;
    On main div.

    Search button is your friend

  • Users who have thanked CHEWX for this post:

    Milan5baros (05-12-2011)

  • #3
    New to the CF scene
    Join Date
    May 2011
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by CHEWX View Post
    Code:
    margin: 0 auto;
    On main div.

    Search button is your friend
    Cheers man. Sorry to ask basic questions. I didn't really know what to search lol.

    What do you mean on main div? I haven't yet created any in my CSS, apart from styling my body.

  • #4
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    A common and masic practice would be to wrap everything thats inside your <body></body> tags in a div with an id or class of "wrapper" or "container".

    Then in your stylesheet, you would target that id or class...id would be:

    Code:
    #wrapper {
           width 960px;
           margin: 0 auto;
    }
    I give wrapper a width LESS that its containing element, which in this case is the <body>, then I set its top and bottom margins to 0 and its left and right margins to auto. Now just make sure you have a valid doctype and thats all you need to center an element.
    Teed


  •  

    Posting Permissions

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