I want a list of rows that have the following look to them:

+------------------------#main-----------------------+
|                                                    |
|                                                    |
| +------+ Lorem ipsum dolor sit amet, consectetur   |
| | pic  | adipiscing elit. Phasellus commodo urna   |
| |      | vel est porttitor et laoreet enim         |
| +------+ pellentesque. Proin tristique tortor sit  |
|          amet magna ornare eleifend. Aliquam       |
|          placerat sapien vitae tellus mattis       |
|          euismod.                                  |
|                                                    |
| +------+ Lorem ipsum dolor sit amet, consectetur   |
| | pic  | adipiscing elit. Phasellus commodo urna   |
| |      | vel est porttitor et laoreet enim         |
| |      | pellentesque.                             |
| +------+                                           |
|                                                    |
| +------+ Lorem ipsum dolor sit amet, consectetur   |
| | pic  | adipiscing elit. Phasellus commodo urna   |
| +------+ vel est porttitor et laoreet enim         |
|          pellentesque.                             |
|                                                    |
|                                                    |
+----------------------------------------------------+

I have all of the above in a div id="main". Each picture and text pair is in a div class="ProdList". As you can see above, the pictures will vary in height but not width. The text may or may not be higher than the picture. This is what's causing my problem. I want a 20px margin below each .ProdList regardless of whether the picture or the paragraph is higher. The css below is giving perfect results as long as the text is higher than the picture. But, since I'm positioning the picture, the .ProdList no longer worries about surrounding it. This causes the .ProdList below to display over the picture if the picture above is higher than the text. I've tried re-positioning the text instead of the picture but I just get the opposite problem. How can I have the .ProdList fully contain both the picture and the text?

Here's the css I've tried:

#main {width: 600px; margin: 10px auto; border: 1px solid gray; padding: 20px;}
/*just a centered, fixed width area*/

.ProdList {margin-bottom: 20px; position: relative;}
/*contains an image and a paragraph*/

.ProdList p {margin-left: 110px;}
/*makes room for the picture*/

.ProdList img {position: absolute;top: 0;}
/*moves the picture to the upper left of .ProdList*/

Adding "Clear: both" doesn't seem to do any good either.

Since this is technicaly tabular data I suppose I could use a table without angering the css gods too much but I'm sure this is possible. I'm just missing something.

1 answer

2
points
This was chosen as the best answer

clear: both won't do anything because nothing is floated. However, it would make things a lot easier if it were. Try:

.ProdList { margin-bottom: 20px; overflow: hidden; }
.ProdList p { margin-left: 110px; }
img { float: left; }
Answered over 6 years ago by Bobby Jack
  • Add a margin-bottom to the img as well for circumstances where the image is taller than the paragraph. Doug over 6 years ago
  • 'overflow: hidden;' never does not do what I think it does. Thanks. Jeff Battle over 6 years ago
  • @Doug: It wasn't clear to me whether the OP wanted that behaviour or not. As it is, .ProdList will always have a bottom margin, no matter which element is taller. Any bottom margin present on the paragraph will create extra space 'inside' the ProdList, so the two could have an equal bottom margin set, as you suggest, for some consistency. Bobby Jack over 6 years ago
  • Looking back, I think I misread it. Your solution should work as is. Doug over 6 years ago