Question : Simple 3 column <li>, middle column stretches?

Hi,

I'm trying to make a simple thumbnail with text layout using css, but the behavior is not what I want. This is what I'm looking for:

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
<li>
    <!-- Col 1, just a thumbnail. -->
    <img src='..' width='50px' height='40px' />

    <!-- Col 2, text, max two lines vertical. -->
    <p>Some title stuff here, max two lines.</p>

    <!-- Col 3, a small icon button. -->
    <img src='..' width='10px' height='10px' />
</li>

I'd like Col2 to fill width with whatever width is available.

All my implementations make the columns shuffle under one another vertically if the available width gets really small - is there a pre-canned solution for this that anyone has?

Thanks

Answer : Simple 3 column <li>, middle column stretches?

That's normal operation for the elements you're using. If you want them fixed in a row, use 'tables'. You can also use 'div' with 'float' but they can get out of alignment depending on content too. An example with a "table" below.

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:



<li>
<table border="0" cellpadding="0" cellspacing="0" summary="">
<tr><td width="52px">    <!-- Col 1, just a thumbnail. -->
    <img src='..' width='50px' height='40px' />
		</td>
		<td>
    <!-- Col 2, text, max two lines vertical. -->
    <p>Some title stuff here, max two lines.</p>
		</td>
		<td width="12px">
    <!-- Col 3, a small icon button. -->
    <img src='..' width='10px' height='10px' /></td></tr>
</table>
</li>