Databases
StackOverflow2013
Postsdbo
POWhy don’t my box borders surround the floats inside them without this CSS fix? (And how does the fix work?)
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POWhy don’t my box borders surround the floats inside them without this CSS fix? (And how does the fix work?)
    text
    copied!<p>I'm teaching myself CSS and HTML, and I've come across something that seems like a bug-- it's challenging how I understand HTML and CSS. I've found a fix for this bug already, but I was hoping someone could cue me as to why the fix works, and if there's some advice out there for how to get a easier handle on CSS's inconsistencies. Below I've detailed the problem and its solution.</p> <p>Problem: I have a few items that I want to be nested in a couple of boxes on the page. I've changed the CSS to draw attention the specific problem areas: The red and green boxes should be sandwiched between the black and yellow lines.</p> <p>The red and green boxes are set to float to the right and left of the page. Their container does not expand to surround them, and the black and yellow lines touch eachother. After applying the magical CSS before my custom CSS, the two lines surround the red/green boxes as expected</p> <p>Here are my files: template.html</p> <pre><code>&lt;html&gt; &lt;head&gt; &lt;!-- uncomment the line below to enable the fix --&gt; &lt;!--&lt;link rel="stylesheet" href="css/resettemp.css" type="text/css" &gt; --&gt; &lt;link rel="stylesheet" href="css/template.css" type="text/css" &gt; &lt;/head&gt; &lt;body&gt; &lt;section class="content"&gt; &lt;header id="contact"&gt; &lt;div id="name"&gt;Name&lt;/div&gt; &lt;div id="address"&gt; &lt;div&gt;Home Address&lt;/div&gt; &lt;/div&gt; &lt;div id="contact-details"&gt; &lt;div&gt;&lt;strong&gt;Phone Number:&lt;/strong&gt;5555 &lt;/div&gt; &lt;/div&gt; &lt;/header&gt; This text should be under everything else. &lt;/section&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>template.css:</p> <pre><code>header#contact { display: block; font-size: 1em; border-bottom: 5px #ff0 dashed; } header#contact #name { display:block; text-align: right; font-size: 2em; border-bottom: 3px #000 solid; } header#contact #address { float:left; background: #f00; } header#contact #contact-details { float:right; background: #0f0; } </code></pre> <p>And the fix below is placed in "resettemp.css":</p> <pre><code>/* our Global CSS file */article:after { clear:both; content:"."; display:block; height:0; visibility:hidden; }aside:after { clear:both; content:"."; display:block; height:0; visibility:hidden; }div:after { clear:both; content:"."; display:block; height:0; visibility:hidden; }footer:after { clear:both; content:"."; display:block; height:0; visibility:hidden; }form:after { clear:both; content:"."; display:block; height:0; visibility:hidden; }header:after { clear:both; content:"."; display:block; height:0; visibility:hidden; }nav:after { clear:both; content:"."; display:block; height:0; visibility:hidden; }section:after { clear:both; content:"."; display:block; height:0; visibility:hidden; }ul:after { clear:both; content:"."; display:block; height:0; visibility:hidden; }/* our ie CSS file */article { zoom:1; }aside { zoom:1; }div { zoom:1; }footer { zoom:1; }form { zoom:1; }header { zoom:1; }nav { zoom:1; }section { zoom:1; }ul { zoom:1; } </code></pre> <p>sources: <a href="http://www.sycha.com/css-clearfix-floated-element-automatically-fill-parent-container" rel="nofollow">http://www.sycha.com/css-clearfix-floated-element-automatically-fill-parent-container</a></p> <p>and then the CSS above: <a href="http://www.marcwatts.com.au/blog/best-clearfix-ever/" rel="nofollow">http://www.marcwatts.com.au/blog/best-clearfix-ever/</a></p> <p>How do I understand how this CSS fix works?<br> How do I teach myself the basic syntax of CSS in addition to understanding these peculiarities? It seems I'm probably using floats to accomplish formatting goals improperly-- What's the more acceptable way to get two boxes of text on opposite sides of a container underneath another block element like this?</p> <p>Browser: google chrome 10.0.648.205</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