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?
| SitePoint Sponsor |
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?

Hi there,
The correct way to centre a div in the browser is to apply the following CSS rule to it:
Tables are not centred by default, but you shouldn't be using them for layout purposes anywayCode CSS:#myDiv{margin:0 auto;}![]()
How well do you know your JavaScript from your jQuery?
Check out SitePoint's latest JavaScript challenge
My blog
I'm wondering how quizpoint has centered their layout. I didn't see margin: 0 auto; in their CSS.

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
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;?


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;
Brilliant ideas, elegant execution.
Graphic Design, Art Direction, Copywriting and Web Design.


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.)
http://www.css-101.org/articles/clea...fix-so-far.phpCode:.row-fluid::before, .row-fluid::after { display: table; line-height: 0; content: ""; }
Bookmarks