Как получить упругий столик рядом с изображением?

Question

Вот что я хочу: http://img571.imageshack.us/img571/4618/myimage.png

Это лучшее, что я мог придумать:

CSS

img
{
  background: red;
  float: left;
}

table
{
  background: yellow;
  width: 90%;
}

HTML

<img src="image.jpg" width="40" height="40" />
<table>
  <tr><td>Table</td></tr>
</table>

Есть проблема с этим подходом. Если в какой-то момент вы измените размер окна браузера, таблица перейдет под изображение: нажмите, чтобы посмотреть демонстрацию .

Как лучше всего добиться этого макета?

Answer 1

Попробуйте окружить свой стол div следующим образом:

<img src="image.jpg" width="40" height="40" />

<div style="padding-left:40px">       
  <table> 
    <tr><td>Table</td></tr> 
  </table> 
</div>

Answer 2

Некоторым людям могут не понравиться таблицы, но вы можете использовать таблицу с 2 ячейками, в которой ваше изображение слева и таблица справа.