StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<h1>The "Problem"</h1> <p>Here is a diagram, fom the <a href="http://www.w3.org/TR/CSS2/visuren.html#floats" rel="nofollow noreferrer">w3c</a>, showing what happens when a float overlaps borders of elements in the normal flow. </p> <p><img src="https://i.stack.imgur.com/uQlsp.png" alt="A floating image obscures borders of block boxes it overlaps."></p> <p>This behavior of floating elements causes its parent element's height to do things most developers consider unintuitive.</p> <p>But given that it is documented on the w3c, this is intentional: it is not a bug.</p> <h1>The Solution You Found</h1> <p>So here's the interesting rule in your CSS:</p> <pre><code>/* our Global CSS file */ header:after { clear:both; content:"."; display:block; height:0; visibility:hidden; } </code></pre> <p>This rule is targeting the <code><header></code> element, but it's also using the <code>:after</code> <a href="http://www.w3.org/TR/css3-selectors/#pseudo-elements" rel="nofollow noreferrer">pseudo-element</a>. The result is that it's like there was an imaginary element after <code><header></code> which you are targeting with this CSS rule:</p> <pre><code><!DOCTYPE html> <html> <head>   <link rel="stylesheet" href="css/template.css" type="text/css" > <title>Teaching myself CSS, HTML. I want help understanding this bug.</title> </head> <body> <section class="content"> <header id="contact"> <div id="name">Name</div> <div id="address"> <div>Home Address</div> </div> <div id="contact-details"> <div><strong>Phone Number:</strong>5555 </div> </div> </header> This text should be under everything else. </section> </body> </html> </code></pre> <p>This imaginary <code>header:after</code> "element" which is added after the <code><header></code> has a <code>clear:both</code> CSS property:</p> <pre><code>/* our Global CSS file */ header:after { clear:both; /* This property clears floating elements! */ content:"."; display:block; height:0; visibility:hidden; } </code></pre> <p>So what does <code>clear</code> do? According to the <a href="http://www.w3.org/TR/CSS2/visuren.html#flow-control" rel="nofollow noreferrer">w3c</a>...</p> <blockquote> <p>This property indicates which sides of an element's box(es) may not be adjacent to an earlier floating box.</p> </blockquote> <p>The less reliable but sometimes clearer <a href="http://www.w3schools.com/css/pr_class_clear.asp" rel="nofollow noreferrer">w3schools</a> describes <code>clear</code> as...</p> <blockquote> <p>The clear property specifies which sides of an element where other floating elements are not allowed.</p> </blockquote> <p>Since the <code>header:after</code> "element" has a <code>clear:both</code> CSS property, is will appear at the bottom of (after) any floating elements on either its left or right sides, such as your red and green boxes.</p> <hr> <p>Now, that <code>resettemp.css</code> file seems to target almost every element imaginable with the same trick - kind of a carpet-bomb approach to solving the <code>float</code>-<code>overflow</code> problem. A better idea is to learn CSS :P</p> <hr> <p>You could also use <code>header { overflow:hidden; }</code> - depending on your needs.</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