I'm editing someone else's code to insert headings on colored rectangle backgrounds, that are 3 rows deep and NOT to go the full width of the table cell.
As the code below shows, I've used <span> and multiple to complete the create this effect. It seems an amateurish way to go about it [I'm not a CSS expert] but it works in IE8. The right hand sides of each row line up nicely. However, in FireFOX the same code produces a ragged right hand side to the rectangle with each row a different length. [Apple Safari could be a problem too.]
As an alternative I've tried using a <div> style but I have trouble limiting its height, and limiting its width to less than the table cell width.
<td width="311" class="column2">
<table border="0" cellspacing="0" cellpadding="0" width="301">
<td height="50" align="left" valign="top" bgcolor="#ffcc00">
<p><span style="color: #FFFFFF; background: #666666; height:17">
<b>TOP OVERALL</b> <br>