title: CSS float and HTML questions
body: <p>I have some questions about basic CSS that I was unable to understand or find an answer for.</p>
  
  <p>First, I tried placing 3 div tags within another div tag. The first main div tag containing the 3 other tags had nothing set for it except a size, which was <code>400px</code> by <code>400px</code>. Of the other 3 divs inside, all were <code>20px</code> by <code>20px</code>, and 1 was assigned <code>float:left</code>, and the other two were assigned a style that was float right. All attributes were defined within a style, and the two divs that were <code>float:right</code> were assigned the same style. My problem is that out of the 2 divs, the one that came last in the code, would appear first in a browser, and I did not understand the reasoning for this.</p>
  
  <p>Here is the code:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;style&gt;
  #main{ 
      border: red 4px dashed;
      width: 25%
      height: 25%,
      }
  #left{ 
      float: left;    
      width: 20px;
      height: 20px,
      }
  #right{ 
      float: right;   
      width: 20px;
      height: 20px,
      }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="main"&gt;
  &lt;div id="left"&gt;1&lt;/div&gt;
  &lt;div id="right"&gt;2&lt;/div&gt;
  &lt;div id="right"&gt;3&lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/head&gt;
  &lt;/html&gt;
  </code></pre>