mimic a table using 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; }