StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Remember that both <code>#content</code> and <code>#left</code> (as well as <code>#right</code>) are floated.</p> <p>Due to the nature of floats, they (or their contents) may overlap. This is well described in <a href="http://www.w3.org/TR/CSS21/visuren.html#floats" rel="nofollow">this section of the spec</a>, and is fairly easy to understand. If you apply negative margins to a floated element that's adjacent to another float, it will simply move to its left (similar to having a <code>left</code> relative offset), <em>over</em> its sibling.</p> <p>In the section on the <a href="http://www.w3.org/TR/CSS21/visuren.html#float-position" rel="nofollow"><code>float</code> property</a>, you'll find a list of "the precise rules that govern the behavior of floats." Now, I'm not 100% familiar with the float model, but these points are what I believe to be relevant:</p> <blockquote> <p>2. If the current box is left-floating, and there are any left-floating boxes generated by elements earlier in the source document, then for each such earlier box, either the left <a href="http://www.w3.org/TR/CSS21/box.html#outer-edge" rel="nofollow">outer edge</a> of the current box must be to the right of the right <a href="http://www.w3.org/TR/CSS21/box.html#outer-edge" rel="nofollow">outer edge</a> of the earlier box, or its top must be lower than the bottom of the earlier box. Analogous rules hold for right-floating boxes.<sup>1</sup></p> <p>7. A left-floating box that has another left-floating box to its left may not have its right outer edge to the right of its containing block's right edge. (Loosely: a left float may not stick out at the right edge, unless it is already as far to the left as possible.) An analogous rule holds for right-floating elements.</p> <p>8. A floating box must be placed as high as possible.</p> <p>9. A left-floating box must be put as far to the left as possible, a right-floating box as far to the right as possible. A higher position is preferred over one that is further to the left/right.</p> </blockquote> <p>So my guess is: a margin of -200px, which is as you say the negative equivalent of the width of the <code>#left</code> element itself, causes it to float all the way <em>up</em> and to the <em>right</em> (rather than to the left) and to hug the edge of the <code>#center</code> element which itself is also floated. The right edge of both elements touch each other because of this full, equal negative margin. Consequently, as you continue to increase (or decrease?) the negative margin, you'll see that the <code>#left</code> element continues to move to its left.</p> <p>Note that the padding applied to the <code>#container</code> element doesn't interact with the margins; even if you remove the padding on either side or both sides, the margins will interact in the same way.</p> <hr> <p><sup>1</sup> <sub>Note also that there's a statement in the section on <a href="http://www.w3.org/TR/CSS21/box.html#collapsing-margins" rel="nofollow">collapsing margins</a> in the linked section of the spec, that describes the behavior of negative margins, but that is irrelevant as the margins we are concerned with here are horizontal and belong to floated elements, and so are never affected by collapsing.</sub></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