StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Two things. Firstly:</p> <pre><code>#notes { width: 561px; margin: 8 auto; text-align: left; } </code></pre> <p>Secondly, make sure you Webpage has a DOCTYPE declaration (mainly for IE's benefit):</p> <pre><code><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> </code></pre> <p><code>margin: 0 auto</code> is the standard way of centering a <em>block element</em>. It's a shorthand syntax. See <a href="http://www.w3.org/TR/CSS21/box.html#mpb-examples" rel="nofollow noreferrer">8.3 Margin properties: 'margin-top', 'margin-right', 'margin-bottom', 'margin-left', and 'margin'</a> of <a href="http://www.w3.org/TR/CSS21/" rel="nofollow noreferrer">Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification</a>:</p> <blockquote> <p>The 'margin' property is a shorthand property for setting 'margin-top', 'margin-right', 'margin-bottom', and 'margin-left' at the same place in the style sheet.</p> <p>If there is only one value, it applies to all sides. If there are two values, the top and bottom margins are set to the first value and the right and left margins are set to the second. If there are three values, the top is set to the first value, the left and right are set to the second, and the bottom is set to the third. If there are four values, they apply to the top, right, bottom, and left, respectively.</p> <pre><code>body { margin: 2em } /* all margins set to 2em */ body { margin: 1em 2em } /* top & bottom = 1em, right & left = 2em */ body { margin: 1em 2em 3em } /* top=1em, right=2em, bottom=3em, left=2em */ </code></pre> </blockquote> <p>So the <code>auto</code> in <code>margin: 0 auto;</code> means:</p> <pre><code>margin-left: auto; margin-right: auto; </code></pre> <p>In this situation the browser will center the block element. IE <strong>won't</strong> do this <strong><em>unless</em></strong> it is in standards-compliant mode, which you force by providing a DOCTYPE declaration. See <a href="http://www.quirksmode.org/css/quirksmode.html" rel="nofollow noreferrer">Quirks mode and strict mode</a>.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload