Making a <div> that looks like a row in a table? - html

Question

I'm having trouble creating a layout that looks like a row in a table, I need it to look like:
--------- ---------------------------
| | Line of text |
| | Line of text |
| | |
--------- ---------------------------
so I'm trying something like:
<div>
<img src="" />
<div float=left>Line of text</div>
<div float=left>Line of text</div>
</div>
it's not coming out right, it looks like the lines of text don't take up the full height, as high as the bottom of the img. I want to solid-color the entire row, how can I do this?
Thanks

Answer 1

I agree with Scobal's comment....if what you are trying to display is tabular data, then it would semantically be correct to display it in a table.
If not, you could theoretically set the div's img float property to left, and then wrap both of your text divs in an outer div and float that one as well.

Answer 2

looks like a comment with an avatar or user data with avatar if I'm not mistaken.
<div class="user">
<img class="avatar">
<div class="user-info">
<p>line of text</p>
<p>line of text</p>
</div>
</div>
css:
.avatar {
width: <width here>.px;
float: left;
background: #ccc;
}
.user-info {
float: left;
}
Of course remember to clear your floats.
You can also substitute lists for the divs if you want it more semantic :P