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?
