CSS div width - lining divs... widths seem to be off in IE7

So far, I'm doing this programmatically using VB.net/ASP.net:

    <table cellspacing="0" cellpadding="4" border="0" style="border-
           width:0px;width:100%;border-collapse:collapse;font-size:12px;">
    <tr>
 <td colspan="6"></td>
      <td align="center" colspan="3" style="background-color:#F0D3D3;text-
          decoration:underline;">SET</td>
      <td colspan="2" style="background-color:#CFF5CE;"></td>
      <td align="center" colspan="3" style="background-color:#BEE0F7;text-
          decoration:underline;">REM</td>
    </tr>
    <tr>
<th style="width:70px;">M</th>
     <th style="width:70px;">PG</th>
     <th style="width:70px;">PV</th>
     <th style="width:70px;">PDD</th>
     <th style="width:40px;">R</th>
     <th style="width:55px;">I #</th>
     <th style="background-color:#F0D3D3;width:70px;">P A</th>
     <th style="background-color:#F0D3D3;width:70px;">U D</th>
     <th style="background-color:#F0D3D3;width:70px;">B P</th>
     <th style="background-color:#CFF5CE;width:70px;">P U</th>
     <th style="background-color:#CFF5CE;width:70px;">D E</th>
     <th style="background-color:#BEE0F7;width:70px;">P</th>
     <th style="background-color:#BEE0F7;width:70px;">U D</th>
     <th style="background-color:#BEE0F7;width:70px;">B P</th>
    </tr>
</table>

<div style="width:100%;clear:both;text-align:left;margin:0;">
   <div style="width:375px;float:left;margin:0;display:block;">
    <img onclick="change(this.parent);" src="minus99.jpg" style="border-width:0px;" />
    <span style="font-weight:bold;font-size:16px;">Test Company</span>
   </div>
   <div style="background-
        color:#F0D3D3;width:210px;float:left;margin:0;display:block;"></div>
   <div style="background-
        color:#CFF5CE;width:140px;float:left;margin:0;display:block;"></div>
   <div style="background-
        color:#BEE0F7;width:210px;float:right;padding:0;margin:0;display:block;"></div>
</div>

This should give me four DIVS inside a container DIV. Here's what it's coming out as:

The correct blocks above the non-inline blocks are from a table with the same exact widths as the ones I'm using on the Divs. There isn't any CSS adding p开发者_运维百科ixels to them, I don't think. I need to line these up, and I can't figure out where my problem is here.

You can use instead of divs the colspan="[number]", for example:

<table cellspacing="0" cellpadding="4" border="0" style="border-width:0px;width:100%;border-collapse:collapse;font-size:12px;">
<tr>
     <td colspan="6"></td>
     <td align="center" colspan="3" style="background-color:#F0D3D3;text-decoration:underline;">SET</td>
     <td colspan="2" style="background-color:#CFF5CE;"></td>
     <td align="center" colspan="3" style="background-color:#BEE0F7;text-decoration:underline;">REM</td>
</tr>
<tr>
     <th style="width:70px;">M</th>
     <th style="width:70px;">PG</th>
     <th style="width:70px;">PV</th>
     <th style="width:70px;">PDD</th>
     <th style="width:40px;">R</th>
     <th style="width:55px;">I #</th>
     <th style="background-color:#F0D3D3;width:70px;">P A</th>
     <th style="background-color:#F0D3D3;width:70px;">U D</th>
     <th style="background-color:#F0D3D3;width:70px;">B P</th>
     <th style="background-color:#CFF5CE;width:70px;">P U</th>
     <th style="background-color:#CFF5CE;width:70px;">D E</th>
     <th style="background-color:#BEE0F7;width:70px;">P</th>
     <th style="background-color:#BEE0F7;width:70px;">U D</th>
     <th style="background-color:#BEE0F7;width:70px;">B P</th>
</tr>
<tr>
     <td colspan="6">
          <img onclick="change(this.parent);" src="minus99.jpg" style="border-width:0px;" />
          <span style="font-weight:bold;font-size:16px;">Test Company</span>
     </td>
     <td colspan="3" style="background-color:#F0D3D3;"></td>
     <td colspan="2" style="background-color:#CFF5CE;"></td>
     <td colspan="3" style="background-color:#BEE0F7;"></td>
</tr> 
</table>

Hoped i helped you.. =)

Width: 100% on the table overrides individual column widths. In your table, there are 13 <th>, and each will have a width of 1/13:th of the table's width. A width property on a <th> doesn't do anything. You could force it by adding display: inline-block to the <th>, but I wouldn't want to go that way.

Also, you should set the pink and green divs to float: right in order to remove the white inbetween green and blue (note however that you'll have to change the order of the divs in your code).

Also, I'd suggest using a table instead if you're aiming to present tabular data.

Did you put cellspacing="0" cellpadding="0" on the table? If not, that might be where the difference is coming from. Or maybe border.

Can you include the table header?