div Table formatting problem in IE

I'm having trouble with a div table control I wrote displaying correctly in IE.

My "table" is just a series of divs designed to look like a table, everything looks good in FF and Chrome but can't seem to get my "rows" to display correctly in IE.

It seems to scrunch all the rows to the left side of the table and then wrap them. I can adjust this by adjusting the row div's width but I would like to find another work around as this is a control and knowing the proper width to apply can be difficult. Here is a screen shot of what it is doing.

Also just noticed that when I maximize my screen on my 22in widescreen monitor it lines up everything correctly. Not sure what is going there.

here is my CSS as well, I think the titles are explanatory enough.

.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;
}

Here is some of the 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 开发者_如何学Cstyle="width: 100px; text-align: left;">9</div>
<div style="width: 200px; text-align: left;">HUT (HARD UPPER TORSO ASSY)</div>
</div>

You could try explicitly setting each row's width equal to the width of the header.

In jQuery try this maybe:

var headerWidth = $('.HeaderRow').width();

Then set that equal to the width of each row

$('.DataRow').css({width: headerWidth });

For this you should have used a table but now that you did it that way... Use a .css for IE only and set the width smaller. You have to do this because IE's box model is different from the modern browsers. Also if you don't use a table you might need to adjust the widh specially for IE 6 and 7.

Apart from the table comments (I agree), are you sure you're not generating an opening or a closing div too many in the contents section? Just in case...

I can't test in IE right now, but if your header row is displaying correctly and the content rows are not, I would try to eliminate the differences between the two to see what causes the problem. Like clear:both, position:relative, etc. The developer tools in IE can help there.

After you locate what's causing it, you can look for an alternative solution for IE.

By the way, an element with a certain ID can only appear once on a page and you have several <span id="arrow">.