Проблема с форматированием таблицы div в IE

Question

У меня возникли проблемы с элементом управления таблицей div, который я правильно отображал в IE.

Моя «таблица» - это всего лишь серия div, созданная для того, чтобы выглядеть как таблица, все хорошо выглядит в FF и Chrome, но, похоже, не может заставить мои «строки» корректно отображаться в IE.

Кажется, что все строки перечеркнуты в левой части таблицы, а затем завертывают их. Я могу настроить это, отрегулировав ширину строки div, но я хотел бы найти другую работу, поскольку это элемент управления и знание правильной ширины для применения может быть затруднено. Вот скриншот того, что он делает.

Кроме того, только заметил, что когда я увеличить свой экран на моем 22in широкоформатный монитор это выстраивается все правильно. Не уверен, что там происходит.

вот мой CSS, я думаю, что названия достаточно толковые.

.dataTable 
{ 
    border-style: solid; 
    border-width: .5px; 
    border-color: #dae2c1; 
    border-collapse: collapse; 
    font-family: PTSansCaptionBold, Arial, Sans-Serif; 
} 

.Table div 
{ 
    font-size: 12px; 
    color: #888; 
    margin: 0; 
    float: left; 
    overflow: hidden; 

} 

.HeaderRow div 
{ 
    border: 1px solid #f3f5eb; 
    padding: 5px 3px; 
    background-color: #bcc3a7; 
    color: #FFFFFF; 
    opacity: 0.7; 
    text-transform: uppercase; 
    -moz-user-select: none; 
    user-select: none; 
    cursor: pointer; 
    position: relative; 
} 

.DataRow 
{ 
    clear: both; 
} 

.DataRow div 
{ 
    border: 1px solid #000000; 
    border-color: #e7ecd7; 
    padding: 5px 3px; 
    min-height: 12px; 
} 

Вот некоторые из HTML

<div class="HeaderRow"> 
<div style="width: 100px; text-align: left;"><span id="arrow"></span>DRAWING #</div> 
<div style="width: 100px; text-align: left;"><span id="arrow"></span>LOT #</div> 
<div style="width: 100px; text-align: left;"><span id="arrow"></span>Serial #</div> 
<div style="width: 100px; text-align: left;"><span id="arrow"></span>AS BUILT</div> 
<div style="width: 100px; text-align: left;"><span id="arrow"></span>AS DESIGN</div> 
<div style="width: 200px; text-align: left;"><span id="arrow"></span>DESCRIPTION</div> 
</div> 
<div class="DataRow"> 
<div style="width: 100px; text-align: left;">0102-10002</div> 
<div style="width: 100px; text-align: left;"> </div> 
<div style="width: 100px; text-align: left;">1004</div> 
<div style="width: 100px; text-align: left;">94</div> 
<div style="width: 100px; text-align: left;">9</div> 
<div style="width: 200px; text-align: left;">HUT (HARD UPPER TORSO ASSY)</div> 
</div>