Making a
that looks like a row in a table?

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

Just remember whilst the world has made you think that tables are pure evil they are NOT, its the way they are used that causes the problem. Its accepted among most of the community that for tabular data 'Tables' are perfectly fine. — Dalbir Singh, May 27 '10 at 13:21

score 5 · Answer 1 · answered May 27 '10 at 13:15

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.

score 2 · Accepted Answer · edited May 23 '17 at 12:18

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

Making a that looks like a row in a table?

2 Answers2

Making a
that looks like a row in a table?