SitePoint Sponsor

User Tag List

Results 1 to 7 of 7

Thread: centered layout

  1. #1
    SitePoint Zealot
    Join Date
    Aug 2010
    Posts
    197
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    centered layout

    what is keeping this layout centered?

    http://quizpoint.com/#questions/66,1...9,28,55,30,161

    is this the default behavior of table display?

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,061
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Hi there,

    The correct way to centre a div in the browser is to apply the following CSS rule to it:

    Code CSS:
    #myDiv{margin:0 auto;}
    Tables are not centred by default, but you shouldn't be using them for layout purposes anyway

  3. #3
    SitePoint Zealot
    Join Date
    Aug 2010
    Posts
    197
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    I'm wondering how quizpoint has centered their layout. I didn't see margin: 0 auto; in their CSS.

  4. #4
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,061
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    It's there, well at least the margin: auto bit is.

    Code CSS:
    bootstrap.css:548
    .container {
      margin-right: auto;
      margin-left: auto;
    }

    This is what centres the main container.

    The declaration to give the main container some spacing from the top of the page comes here:

    Code CSS:
    quizpoint.cc:14
    #main{
      margin-top: 3.5em;
    }

    You can see all of this if you use your browser's dev tools.
    Here's how to do it in Chrome: http://net.tutsplus.com/tutorials/to...kup-and-style/

  5. #5
    SitePoint Zealot
    Join Date
    Aug 2010
    Posts
    197
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    k, last question about quizpoint. on div.row-fluid it's set to display:table; and then content "".

    I've seen this on a few other sites with display set to table.. what is the purpose of content "" in conjunction with display:table;?

  6. #6
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,821
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    mmm, that just seems like BAD CODE. Content:"..." ; is only applicable to generated pseudo elements such as :before or :after. it has NOTHING to do with display:table;

  7. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,324
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    The content="" is set on the :before and :after pseudo elements on the content area, and this is the latest artifice for enclosing floats, though I'm not sure it's needed here. (It's probably just there as part of all that bloated bootstrap stuff.)

    Code:
    .row-fluid::before, .row-fluid::after {
      display: table;
      line-height: 0;
      content: "";
    }
    http://www.css-101.org/articles/clea...fix-so-far.php


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
  •