Centered layout

HTML & CSS
1

what is keeping this layout centered?

is this the default behavior of table display?

2

Hi there,

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

#myDiv{margin:0 auto;}

Tables are not centred by default, but you shouldn’t be using them for layout purposes anyway :slight_smile:

3

I’m wondering how quizpoint has centered their layout. I didn’t see margin: 0 auto; in their CSS.

4

It’s there, well at least the margin: auto bit is.

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:

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/tools-and-tips/chrome-dev-tools-markup-and-style/

5

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

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

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.)

.row-fluid::[COLOR="#FF0000"]before[/COLOR], .row-fluid::[COLOR="#FF0000"]after[/COLOR] {
  display: table;
  line-height: 0;
  content: "";
}

http://www.css-101.org/articles/clearfix/latest-new-clearfix-so-far.php