mimic a table using css - css

Question

I'm trying to display a grid of items, with each item having a photo on the left and a description on the right, something like this:
----------------------------
| photo | item description |
----------------------------
I want to display these items in a 3x3 grid on the page. I have the grid part worked out, what I'm having trouble with is alignment of the photo and description. When the height of the description exceeds the height of the photo, I don't want the text to wrap under the photo. I essentially want to maintain two separate columns.
I have tried this:
.item{
padding-left: 60px; // size of photo + 5px margin
background-position: 5px 0px;
}
<div class="item" style="background-image: url('/img/photo123.jpg');">
Here is the item description
</div>
That has worked very well. the markup is clean and I don't have to mess around with absolute/relative, however, now I can't add a border to the image. Can anyone suggest a workaround or alternative?

Answer 1

IMHO that is not clean. Those are obviously content relevant images, so they shouldn't be background images.
It usually very simple with floating, but there are several other ways.
CSS:
.item img {
float: left;
}
.item p {
margin-left: 60px; // size of photo + 5px margin
}
HTML:
<div class="item">
<img src='/img/photo123.jpg'> <!-- Add width/height and alt text -->
<p>Here is the item description</p>
<div style="clear:left"></div>
<!-- or any other clearing solution, for example, "clearfix" -->
</div>

Answer 2

Have a look here. You just need to apply min-height on your div.

Answer 3

Why don't you want to use a table? This seems to me to be tabular data (admittedly with the image being a data element), so wouldn't a table would be the obvious choice?

Answer 4

you could use list-elements like so
<ul>
<li>Description</li>
<li class="image">Image</li>
<li>Description</li>
<li class="image">Image</li>
<li>Description</li>
<li class="image">Image</li>
<li>Description</li>
<li class="image">Image</li>
<li>Description</li>
<li class="image">Image</li>
<li>Description</li>
<li class="image">Image</li>
<li>Description</li>
<li class="image">Image</li>
<li>Description</li>
<li class="image">Image</li>
<li>Description</li>
<li class="image">Image</li>
</ul>
and the CSS
ul {width: 960px; font-family: Arial; font-size: 12px; float: left;}
ul li {width: 80px; height: 180px; padding: 10px; background: #444444; list-style: none; float: left; color: #cccccc; }
ul li.image {width: 180px; height: 180px; padding: 10px; background: #cccccc; margin: 0 20px 20px 0; color: #444444; }