title: 'border-bottom' on div appears at top? Div is not wrapping around text?
body: <p>I'm creating a tabled like view of data in divs. I am having to use a lot of inline HTML and CSS due to the enterprise framework I am using.</p>
  
  <p>The way to visualise it: each row has a container div (rowContainer), and each in a row is contained in a div (collResult). I want the border-bottom element to appear at the bottom of the container div. In IE this is working fine, but in Firefox, the borders don't wrap around the rows, instead they appear all out of sync with the row results.</p>
  
  <p>Here is an example of my code:</p>
  
  <pre><code>&lt;div class='rowContainer' style='border-bottom: 1px solid #B4B4B4; padding:0; width: 100%; height: auto;'&gt;
  &lt;div class='collResult' style='width: 25%; float: left; display: inline; margin: 0; font: normal 12px Arial;'&gt;Number 1&lt;/div&gt;
  &lt;div class='collResult' style='width: 25%; float: left; display: inline; margin: 0; font: normal 12px Arial;'&gt;ABCDE&lt;/div&gt;
  &lt;div class='collResult' style='width: 25%; float: left; display: inline; margin: 0; font: normal 12px Arial;'&gt;NAME&lt;/div&gt;
  &lt;div class='collResult' style='width: 25%; float: left; display: inline; margin: 0; font: normal 12px Arial;'&gt;NONE
  &lt;/div&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Thanks for any help</p>