CSS不在不同的浏览器中显示相同的内容

Question

这就是我的页面应该是什么样子，这在IE中显示：

这就是Firefox中的样子：

这是我的代码：

@using CustPortal.serviceclass
@model CustomerData      

<br/>

<div class="leftdiv">
  <fieldset> 
    <legend>Customer Info</legend>
    @Html.Partial("CustomerInfo", Model)
  </fieldset>
</div>

<div class="rightdiv">
  <fieldset> 
    <legend>Balance</legend>
    <div>
      @Html.Partial("AccountBalance", Model)
    </div>    
  </fieldset>
</div>


<div>
     <table style="width: 100%" id="ThinLineTable">
        <tr>
          <th class="ThinLineTdLeft ThinLineTh" style="width: 15%">Date</th>
          <th class="ThinLineTdLeft ThinLineTh" style="width: 15%">Refer#</th>
          <th class="ThinLineTdLeft ThinLineTh" style="width: 30%">Description</th>
          <th class="ThinLineTdRight ThinLineTh" style="width: 10%">Qty</th>
          <th class="ThinLineTdRight ThinLineTh" style="width: 15%">Total</th>
          <th class="ThinLineTdRight ThinLineTh" style="width: 15%">Balance</th>
        </tr>

    @foreach (var item in (IEnumerable<TransactionHistory>) ViewBag.TransactionHistory)
    {
      <tr>
        <td class="ThinLineTdLeft">@item.TransactionDate</td>
        <td class="ThinLineTdLeft">@item.ReferenceNumber</td>
        <td class="ThinLineTdLeft">@item.Description</td>
        <td class="ThinLineTdRight">@item.Quantity</td>
        <td class="ThinLineTdRight">@item.Total</td>
        <td class="ThinLineTdRight">@item.Balance</td>               
      </tr>      
    }  

    </table>
</div>

我的css：

.ThinLineTdRight {
    padding: 5px;
    border: solid 1px #d4d0d0;
    text-align: right;
}

.ThinLineTdLeft {
    padding: 5px;
    border: solid 1px #d4d0d0;
    text-align: left;
}

.ThinLineTh {
    background-color: #e8eef4;
}
.rightdiv {
    float: right;
    width: 49%;
  text-align: left;
}
.leftdiv {
    float: left;
    width: 49%;
  text-align: left;
}

我对CSS不太满意，我还在学习。任何人都可以告诉我，我在做什么错误，使它在FF中的显示方式与在IE中显示不同？

谢谢！