SitePoint Sponsor

User Tag List

Results 1 to 7 of 7

Thread: centered layout

  1. #1
    SitePoint Enthusiast
    Join Date
    Aug 2010
    Posts
    83
    Mentioned
    0 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
    Grüße aus'm Pott
    SitePoint Award Recipient Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    2,461
    Mentioned
    39 Post(s)
    Tagged
    1 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
    How well do you know your JavaScript from your jQuery?
    Check out SitePoint's latest JavaScript challenge


    My blog

  3. #3
    SitePoint Enthusiast
    Join Date
    Aug 2010
    Posts
    83
    Mentioned
    0 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
    Grüße aus'm Pott
    SitePoint Award Recipient Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    2,461
    Mentioned
    39 Post(s)
    Tagged
    1 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/
    How well do you know your JavaScript from your jQuery?
    Check out SitePoint's latest JavaScript challenge


    My blog

  5. #5
    SitePoint Enthusiast
    Join Date
    Aug 2010
    Posts
    83
    Mentioned
    0 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
    Rockford, IL
    Posts
    2,368
    Mentioned
    11 Post(s)
    Tagged
    0 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
    SitePoint Award Recipient ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, Australia
    Posts
    19,981
    Mentioned
    216 Post(s)
    Tagged
    2 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
  •