Discover Habbo's history
Treat yourself with a Secret Santa gift.... of a random Wiki page for you to start exploring Habbo's history!
Happy holidays!
Celebrate with us at Habbox on the hotel, on our Forum and right here!
Join Habbox!
One of us! One of us! Click here to see the roles you could take as part of the Habbox community!


Results 1 to 3 of 3
  1. #1
    Join Date
    Jul 2008
    Posts
    5,289
    Tokens
    0

    Latest Awards:

    Default [SimpleTUT] Centering DIVs And Foot Divs

    Well, I've seen alot of people wanting to center divs, Horizontally and Verticaly so its right in the middle, and alot of people want to put a div right at the bottom.

    Well i thought i'd post it here.


    Centering Divs


    Horizontally


    Code:
    margin-left: auto;
    margin-right: auto;
    Or

    Code:
    margin: auto;

    Horizontally And Vertically


    Code:
    top: 50%;
    left: 50%;
    margin-top: -**px; **=Half Of DIVs Height
    margin-left: -**px; **=Half Of DIVs Width
    position: absolute;

    Foot Divs


    Code:
    width: 100%; Optional, If you want a centered foot, refer to above.
    top: 100%;
    margin-top: -**px; **=ALL Of Divs Height, Not Half
    position: absolute;



    Vertically+Horizontally Centered And Foot Div Can Be Seen Here

  2. #2
    Join Date
    May 2006
    Location
    Hull
    Posts
    7,701
    Tokens
    2,430
    Habbo
    Moh

    Latest Awards:

    Default

    It dosn't always center in internet explorer.

    Putting this at the top of your page should make it center in both firefox and internet explorer.

    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.

  3. #3

    Default

    Some important things to remember when using the dead center method, with position absolute, that the container needs to be set to position relative; if look at the following example http://pastebin.me/494010874beae it shows, how the div is positioned dead center to the body, but if you want it dead center of the container you need to add position: relative to the container as seen here http://pastebin.me/494010b7ca163.

    Also for people want to know why adding
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    makes it work in IE, is that this doctype or any other doctype is needed because, browsers use this to triggers standards mode, without it, it'll be in quirks mode.

    As for the "or" method
    Code:
    margin: auto;
    that's not exactly the same as
    Code:
    margin-left: auto;
    margin-right: auto;
    although it produces the same result

    The equivalent would be
    Code:
    margin: 0 auto;
    or
    Code:
    margin: 0 auto 0 auto;
    Last edited by Iszak; 10-12-2008 at 07:07 PM.

Posting Permissions

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