CSS Div Width - Lining divs ... ширина, кажется, отключена в IE7

Question

Пока что я делаю это программно, используя 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>

Это должно дать мне четыре DIVS внутри контейнера DIV. Вот как это выглядит:

Правильные блоки над не встроенными блоками взяты из таблицы с той же шириной, что и те, которые я использую в Div. Я не думаю, что к ним добавляются пиксели CSS. Мне нужно выстроить их в ряд, и я не могу понять, где моя проблема здесь. Любая помощь будет оценена.

Answer 1

Вы можете использовать вместо делителей colspan="[number]", например:

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

Надеюсь, я вам помог .. =)

Answer 2

Width: 100% в таблице переопределяет ширину отдельных столбцов. В вашей таблице их 13 <th>, и каждый будет иметь ширину 1/13: ширины таблицы. Свойство width на <th> ничего не делает. Вы можете форсировать это, добавив display: inline-block к <th>, но я бы не хотел идти по этому пути.

Кроме того, вы должны установить для розового и зеленого делителей значение float: right, чтобы убрать белый цвет между зеленым и синим (однако учтите, что вам придется изменить порядок делений в коде).

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

Answer 3

Вы put cellspacing="0" cellpadding="0" на столе? Если нет, то, возможно, именно в этом и заключается разница. Или, может быть, граница.

Можете ли вы включить заголовок таблицы?