[thelist] Replicating a two column table with CSS

[Mike Cordeiro]

I hope someone can help with this problem. The site I'm currently 
working on is my first foray into a pure CSS layout . Needless to say 
it's been a hell of a learning experience, but I seem to have hit on a 
problem that I just can't beat. I'll spare you all the greater details 
and boil down to the specific problem.

I have a thumbnnail image on the left and would like a block of text to 
appear to the right of that image and have the left side of the text be 
nicely aligned. If I were to build this using a table this is what I 
would do:

<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="60" valign="top"><img src="thumb.gif" width="50" 
height="50"></td>
    <td valign="top"><h4>Headline</h4>
      <h5>date</h5>
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam 
nonumy
      eirmod tempor invidunt ut labore et dolore magna aliquyam erat, 
sed diam
      voluptua.
    </td>
  </tr>
</table>

I initially tried wrapping the image and text in their own classes each 
floated left. This created the desired effect in IE, but not in Mozilla, 
which displays the block of text beneath the thumb. This obviously tells 
me that my CSS is wrong. I've tried a variety of different solutions and 
searched google all to no avail.

Can someone please offer some insight into this problem?

-- 
______________________________________________________________________
Mike Cordeiro							cordeiro at awdi.ca