' border-bottom 'на div появляется вверху? Div не обертывает текст?

Я создаю табличное представление данных в div. Мне приходится использовать много встроенного HTML и CSS из-за корпоративной инфраструктуры, которую я я использую.

Способ визуализации: каждая строка имеет контейнер div (rowContainer), и каждая строка содержится в div (collResult). Я хочу, чтобы элемент border-bottom отображался внизу контейнер div. В IE это работает нормально, но в Firefox границы не охватывают строки, вместо этого они кажутся не синхронизированными с результатами строки.

Вот пример моего кода:

<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>

Спасибо за любую помощь