#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2011
    Posts
    3
    Rep Power
    0

    Margin: 0 auto; doesn't work


    Hi, complete CSS/HTML dummy so please be gentle.

    I have an id named centre, trying to center anything within the div. Long story short "auto" doesnt work, but if I give it a value such as "5px" it does work.

    Within my CSS I have:

    #centre {width: 100%; margin-left: auto; margin-right: auto;}
    does nothing
    #centre {width: 100%; margin-left: 5px; margin-right: auto;}
    moves everything along 5px

    So I'm guessing that I have correctly placed the <div id="centre"> and closing </div> in the page in question or I assume it would have no effect?
    The items I'm trying to center are fluid items totalling 96% of the available space including padding (any more and I get wrapping issues) hence I need to centre things with 2% either side.

    Any help would be much appreciated.
  2. #2
  3. No Profile Picture
    buildmyweb.org
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2012
    Location
    NY
    Posts
    62
    Rep Power
    8
    with
    Code:
    margin-left: auto;
    you are allowing the browser to dictate the margins. so with 100% width, there is no margin.

    in the second line of code you have expressly indicated 5px of margin so it is rendered.

    i dont much like, therefore dont work with, fluid layouts so dont take this as gospel...

    but what if you did something like:
    Code:
    #centre {width: 96%; margin-left: 2%; margin-right:2%;}

    Comments on this post

    • Kravvitz agrees
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2011
    Posts
    3
    Rep Power
    0
    Thanks, makes sense.

IMN logo majestic logo threadwatch logo seochat tools logo