Float image next to table with 100% width

Question

My problem is similar to the one in this question, which hasn't seen activity in over a year. I have a table of unknown width, being displayed next to an image of a known size. THe width of the container is unknown. I want the image floated right, and the table to share a line, expanding to fill the remaining space. I'd like to do this without nested tables (because eew). I thought it should be as simple as:

<img src="img.jpg" style="float:right" />
<table style="width:100%">
    ...
</table>

...but that is not the case. Here's a fiddle that's close to what I want, just missing the table width: http://jsfiddle.net/K2fpA/

If possible, I'd like to keep CSS3 out of it. I can do a nested table if absolutely necessary, but I want to make sure I'm not missing something first. Any ideas?

Solution

step 1. add style position relative for the containing div. step 2. position:absolute for image

.container img {
position:absolute;
right:0;
top:0;
}
.container .table-div {
position:relative; 
padding-right:'images-width';
}

<div class="container">
  <div class="table-div"> 
    <table style="width:100%;" >
    </table>
  </div>
</div>

Comments

[vtacreative]

Not sure if you're aware but your inline style float:right is missing a semicolon.

[Dan Hlavenka]

I am aware, and that semicolon is not required by syntax. I generally don't use inline styles (or omit optional semicolons) in a production page, but for this question, I wanted to keep things concise.

[Dan Hlavenka]

Any time I float the table or its parent div, the table shrinks down to the smallest size possible (even when I supply width: 100%). Setting a width in px sizes the table correctly, but wouldn't work in my case since the size I need will vary by browser.

[Dan Hlavenka]

Just using position: relative and padding-right: [xxx]px` with float:right on the image worked. Thanks!