SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    gimme the uuuuuuuuuuu duuudie's Avatar
    Join Date
    Feb 2004
    Location
    Switzerland
    Posts
    2,253
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    the best way to center your layout?

    Hi
    I've seen a couple of different ways to center a layout. I was wondering which one is the best. What do you CSS experts would recommend to a beginner like me?

    thank you very much for your time

  2. #2
    gimme the uuuuuuuuuuu duuudie's Avatar
    Join Date
    Feb 2004
    Location
    Switzerland
    Posts
    2,253
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I mean... I've seen people using <center> or div align="center" but the center tag is deprecated isnt'it? So I've seen other ways, like: 'margin... auto'.

    Are there other ways?

    How does the margin auto technique exactly work?

  3. #3
    100% Windoze-free earther's Avatar
    Join Date
    Feb 2003
    Location
    Linuxland
    Posts
    2,788
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Don't know that I can be considered an 'expert' by any means but I prefer to set equal margins (usually in %) for the main <div> as margin: auto doesn't seem to work in IE 5x.

  4. #4
    SitePoint Author silver trophybronze trophy
    wwb_99's Avatar
    Join Date
    May 2003
    Location
    Washington, DC
    Posts
    10,625
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    % margins work if you are using a liquid layout. For fixed width, the best technique is:
    Code:
    body { text-align: center; } */for IE/*
    #container { width: 760px; text-align: left */to fix above/*; margin: auto */for everyone else*/}
    WWB

  5. #5
    gimme the uuuuuuuuuuu duuudie's Avatar
    Join Date
    Feb 2004
    Location
    Switzerland
    Posts
    2,253
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thank you very much

    more comments, more ideas are more than welcome

  6. #6
    SitePoint Member KellyB's Avatar
    Join Date
    Jul 2003
    Location
    Scotland
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    so does

    body { text-align: center; }

    not work in any other browsers?
    Kelly Biddington
    Graphic / Web Designer
    www.c1vision.com
    www.2visualize.com

  7. #7
    SitePoint Author silver trophybronze trophy
    wwb_99's Avatar
    Join Date
    May 2003
    Location
    Washington, DC
    Posts
    10,625
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    It works as designed in other browsers--it centers the text, not block-level elements such as Divs or Tables.

    In IE, it centers block level elements. So, aligning text center will center your container Div or Table in IE, while the margin:auto will work pretty much everywhere else. The text-align: left is to bring things back to normal.

    WWB

  8. #8
    SitePoint Evangelist N9ne's Avatar
    Join Date
    Aug 2002
    Location
    UK
    Posts
    596
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    body {
    text-align: center;
    }
    #container {
    margin: auto;
    }
    That's what I use most of the time. Seems to agree with most browsers .

  9. #9
    gimme the uuuuuuuuuuu duuudie's Avatar
    Join Date
    Feb 2004
    Location
    Switzerland
    Posts
    2,253
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks to you all for your answers

    I have a little question though: what does 'auto' exactly do?

  10. #10
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by duuudie
    thanks to you all for your answers

    I have a little question though: what does 'auto' exactly do?
    "auto" tells the browser to take as much margin as possible. For example, if you set a width on a <div> and only gave it a margin-left of "auto", it would move as far as possible to the right, since no right margin is defined. By setting both margin-left and margin-right to "auto", you're telling the browser to take up as much margin on both sides as possible, thereby giving your <div> the appearance of being centered.

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,288
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    HI,

    Quote Originally Posted by N9ne
    body {text-align: center;}#container {margin: auto;}
    Remember that the container needs a specified width otherwise there is nothing to centre (except the text of course )

    Paul

  12. #12
    gimme the uuuuuuuuuuu duuudie's Avatar
    Join Date
    Feb 2004
    Location
    Switzerland
    Posts
    2,253
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thank you all!

    Once again your explanations have been very enlightening!

    thumbs up.



Bookmarks

Posting Permissions

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