jlrolin jlrolin - 9 months ago 41
Vb.net Question

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-
<td colspan="6"></td>
<td align="center" colspan="3" style="background-color:#F0D3D3;text-
<td colspan="2" style="background-color:#CFF5CE;"></td>
<td align="center" colspan="3" style="background-color:#BEE0F7;text-
<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>

<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 style="background-
<div style="background-
<div style="background-

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

alt text

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 pixels to them, I don't think. I need to line these up, and I can't figure out where my problem is here. Any help would be appreciated.

Answer Source

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.