How to represent dual-cell format in CSS?

Question

Maybe I'm having a brain fart today, but I've been having this problem for awhile now.

Anyways, given this code:

<table>
<tr>
    <td><img src="" /></td>
    <td valign="middle">Text</td>
</tr>
</table>

This renders a format with an image to the left, and some vertically centered text to the right of it. This works because then I can have multi-line text, and still have the image positioned "nicely".

Now, ideally, tables should only be used for tabular data, yes? So how can I represent this in CSS?

I'm thinking <div> tags? But I encapsulate the entire bit in a <p> box with style="display: table; border: 1px solid black;", and I'm afraid relative positioned divs might end up jutting out of the box, necessitating tweaking, which I am loathe to do in CSS...

Help!

Answer 1

HTML:

<div id="container">
<img src="..." />
<p>text</p>
</div>

CSS:

#container {
 width: 200px;
}

#container img, #container img{
 width: 100px;
 float: left;
}

Answer 2

<div style="vertical-align: middle;">
 <img style="float:left;" src="" alt="" />
 <p>Your text</p>
</div>

Answer 3

it doesn't matter what tags you are using (especially after a css reset). you just need to set the wrapper tag display: table; and the nested cell tags to display: table-cell; after that you can use the vertical-align you also may need put even more tags around your content to recreate a true table, whit table rows.