CSS Float & Table Won't Play Nicely

[shannona]

I've been banging my head against an interaction between a table and float element.

I want the two of them to together take up 100% of the width of their container. If the table cells' content were to wrap around the float, even better, but that's not necessary.

However, I'm continuously running into two issues:

1.) If I make my table 100%, it writes over the float: right for tables where the content text is long enough.

2.) If I don't make my table 100%, the table is only as wide as the content (and thus looks bad).

Here's an example of the former:
http://index.rpg.net/display-entry-N...l?mainid=10503

<div class='boxLined smallwords' style='float: right; text-align: center'>
 
  <a target='_blank' href='/pictures/show-water.phtml?picid=12427'><img align='center' border=0 src='/pictures/show-thumbnail.phtml?picid=12427&maxWidth=150&maxHeight=300'></a>
 
</div>
 
<div>
  <table class='boxWide'>
 
# I suspect any wide content here does the trick
 
<tr style="background-color:#BBBBFF"><td class='padded' align='right' width='100'><b>Title</b></td><td>The Spinward Marches</td></tr><tr style="background-color:#DDDDFF"><td class='padded' align='right' width='100'><b>Author</b></td><td><a href="http://index.rpg.net/display-search.phtml?key=contributor&value=Martin%2BDougherty&sort=system">Martin Dougherty</a></td></tr><tr style="background-color:#BBBBFF"><td class='padded' align='right' width='100'><b>Book Type</b></td><td>Background: Setting</td></tr><tr style="background-color:#DDDDFF"><td class='padded' align='right' width='100'><b>Genre</b></td><td>Science Fiction</td></tr><tr style="background-color:#BBBBFF"><td class='padded' align='right' width='100'><b>Setting</b></td><td><a href="http://index.rpg.net/display-search.phtml?key=background&value=Traveller&sort=system">Traveller</a> (Aramis Subsector; Cronor Subsector; Darrian Subsector; District 268; Five Sisters Subsector; Glisten Subsector; Jewell Subsector; Lanth Subsector; Lunion Subsector; Mora Subsector; Querion Subsector; Regina Subsector; Rhylanor Subsector; Spinward Marches; Sword Worlds Subsector; Trin's Veil Subsector; Vilis Subsector; Classic Era)</td></tr>
 
  </table>
</div>
 

And here's the styles of note:

.boxLined { background-color: #DDDDFF;
       padding: 3px;
       border: solid 2px #663399; }
 
.boxWide { width: 100%;
           border-spacing: 0px; }
 
.padded { padding: 4px; }
 

How can I make that table and that float play together nicely?

[hsriat]

Put both elements in divs. Give the receptive properties of the elements to the containing divs instead of the elements themselves. And then also make table width 100%.

[shannona]

Sadly, that doesn't change anything, at least not in Firefox.

I'm just going to have to use a table for the top level layout instead of divs, as far as I can tell.

Nonetheless, thanks for the suggestion.