'border-bottom' on div appears at top? Div is not wrapping around text?

Question

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.

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.

Here is an example of my code:

<div class='rowContainer' style='border-bottom: 1px solid #B4B4B4; padding:0; width: 100%; height: auto;'>
<div class='collResult' style='width: 25%; float: left; display: inline; margin: 0; font: normal 12px Arial;'>Number 1</div>
<div class='collResult' style='width: 25%; float: left; display: inline; margin: 0; font: normal 12px Arial;'>ABCDE</div>
<div class='collResult' style='width: 25%; float: left; display: inline; margin: 0; font: normal 12px Arial;'>NAME</div>
<div class='collResult' style='width: 25%; float: left; display: inline; margin: 0; font: normal 12px Arial;'>NONE
</div></div>

Thanks for any help

Answer 1

This is because you are floating the inner divs, float the outer div also to fix this problem.

When you float elements, the parent element does not expand to the height of its children unless it is floating its self, or there is another non floating child. Another solution if you cannot float the parent is to add an element after the current children that does not float and clears the other elements. e.g. add this after the inner divs

<div style="clear:both"></div>