Positioning a table next to a floating image

问题

I'd like to position a table next to a floating image while keeping the width of the table 100% and not overflowing the width of the parent element.

I've tried various techniques but haven't achieved the result I wanted yet. Here is what I mean: http://jsfiddle.net/AX3UR/3/

Any suggestions? Using the "overflow: hidden" property for #container is not a solution for me since essential information in table rows are lost.

回答1:

Wrap the table in a div, and float it left

See the updated jsfiddle http://jsfiddle.net/AX3UR/5/

Also your h2 should not be in the p

Edit

I just noticed you wanted to keep the table 100% width. This is not easy with floating. However you could use nested tables, but that has its on pros and cons.

See http://jsfiddle.net/AX3UR/13/ for a nested table solution.

来源：https://stackoverflow.com/questions/7897145/positioning-a-table-next-to-a-floating-image