CODEWITHSUNDEEP
css
Evan
Evan

Reputation: 357

mimic a table using css

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?

Upvotes: 1

Views: 1416

Answers (4)

pixeltocode
pixeltocode

Reputation: 5308

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; }

Upvotes: -1

RoToRa
RoToRa

Reputation: 38400

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>

Upvotes: 5

ZombieSheep
ZombieSheep

Reputation: 29953

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?

Upvotes: 0

Eric
Eric

Reputation: 97571

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

Upvotes: 0

Related Questions