How to get an elastic table next to the picture

Question

This is the best I could think of:

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>

There is a problem with this approach. If you resize the browser window, at some point the table will jump below the image: click to view a demo .

What's the best way to achieve this layout?

+2

Pavel Chuchuva Apr 30 10 at 5:34 am

2 answers

Some people may not like tables, but you can use a 2-cell table that contains your image on the left and a table on the right.

+1

Mark redman Apr 30 At 5:56 am

Draco ater · Accepted Answer · 2010-04-30T05:51:30+0000

Try to surround your table with a div like this:

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

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