title: Inline div's rows messed up
body: <p>I'm having an issue that I don't know why is this, but I created 3 ids on CSS named first, second, and third and aligned them to left to be all inline with a 320px width. Now I'm trying to put the same divs on a second row inline as well but they are messing up. The second row starts in the middle of the page, and only the third one displays the right way. The first one starts on the left, the next one starts in the middle of the page, and the next one starts on the left as well and so on...</p>
  
  <p>Here's the JSFiddle file: <a href="http://jsfiddle.net/vyxN4/1/" rel="nofollow">Example</a></p>
  
  <p>You have to expand the <strong>Result</strong> box to the left to the max width so you can see what I'm talking about.</p>
  
  <p><strong>html:</strong></p>
  
  <pre><code>&lt;a href="#"&gt;
      &lt;div id="first" align="left"&gt;&lt;img src="http://www.main-hosting.com/hostinger/welcome/index/folder.png"&gt;&lt;strong&gt; Empty-Field/&lt;/strong&gt;&lt;/div&gt;
      &lt;div id="second"&gt;-&lt;/div&gt;
      &lt;div id="third" align="right"&gt;Last Update - January  0, 2014 00:00:00&lt;/div&gt;
  &lt;/a&gt;
  
  &lt;a href="#"&gt;
      &lt;div id="first" align="left"&gt;&lt;img src="http://www.main-hosting.com/hostinger/welcome/index/folder.png"&gt;&lt;strong&gt; Empty-Field/&lt;/strong&gt;&lt;/div&gt;
      &lt;div id="second"&gt;-&lt;/div&gt;
      &lt;div id="third" align="right"&gt;Last Update - January  0, 2014 00:00:00&lt;/div&gt;
  &lt;/a&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>#first {
      width:320px;
      float:left;
  }
  #second {
      width:320px;
      float:left;
  }
  #third {
      width:320px;
      float:left;
  }
  </code></pre>