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

Question

Hi,

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