By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
462,927 Members | 573 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 462,927 IT Pros & Developers. It's quick & easy.

CSS Float & Table Won't Play Nicely

P: 3
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:

Expand|Select|Wrap|Line Numbers
  1. <div class='boxLined smallwords' style='float: right; text-align: center'>
  3.   <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>
  5. </div>
  7. <div>
  8.   <table class='boxWide'>
  10. # I suspect any wide content here does the trick
  12. <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="">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="">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>
  14.   </table>
  15. </div>
And here's the styles of note:

Expand|Select|Wrap|Line Numbers
  1. .boxLined { background-color: #DDDDFF;
  2.        padding: 3px;
  3.        border: solid 2px #663399; }
  5. .boxWide { width: 100%;
  6.            border-spacing: 0px; }
  8. .padded { padding: 4px; }
How can I make that table and that float play together nicely?
Jul 22 '09 #1
Share this Question
Share on Google+
2 Replies

Expert 100+
P: 1,654
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%.
Jul 22 '09 #2

P: 3
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.
Jul 23 '09 #3

Post your reply

Sign in to post your reply or Sign up for a free account.