Take the 2-minute tour ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.

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.

share|improve this question
    
This might be better on doctype.com –  John Conde Aug 26 '10 at 14:54
    
This might be better on stackoverflow.com ;) –  DisgruntledGoat Aug 26 '10 at 16:36
    
Aw crap. I forgot about doctype.com. I guess I was thinking about that when I posted here. –  Jeff Aug 26 '10 at 20:04

3 Answers 3

up vote 2 down vote accepted

This works for me:

#main {width: 600px; margin: 10px auto; border: 1px solid gray; padding: 20px;}

.ProdList {
     padding-bottom: 20px; 
     float: left; 
     clear: left; 
     width: 100%; 
     border:2px solid green
}
/*contains an image and a paragraph*/

.ProdList p {
     margin-left: 50px;
     float:left;
     width:60%;
}
/*makes room for the picture. Play with margin and width % for best fit*/

.ProdList img {float: left;width:100px}
/*moves the picture to the upper left of .ProdList*/

The 'border' on the ProdList DIV is just so I can see the extents of the DIV to make sure it isn't collapsing. I often put a

div {
   border: 1px solid red;
}

at the bottom of my CSS files so I can uncomment it when I want to see where my DIVs are actually falling.

The only tricky thing here is that since the image is not positioned absolute, the margin of the paragraph is now relative to the side of the image. If all of your image widths are the same, you can take out the width on the img (which stretches the images anyway - I just screengrabbed a few images of about the same width, but different heights.

UPDATE:

Added width: 100% to the ProdList div to make this work on IE7, the a width: 60% on the paragraph to make it work with both IE and Firefox. May still need tweeking.

share|improve this answer

The simplest way is to get rid of the positioning stuff, and simply float the image and paragraph. Then add either overflow: hidden or float: left to the .ProdList elements.

share|improve this answer

there is a very sweet solution implemented by facebook for exactly this problem. If you have firebug installed in firefox, you can easily check it out. For example here:

http://www.facebook.com/pages/Yahoo-Nachrichten/108333755877035?ref=ts&v=wall (they always have a picture and some text next to it)

the image gets: float:left and the text gets: display:table-cell; vertical-align:top; width:1000px;

The only drawback is, that you will have to write some specific code for IE6 and IE7, which you can find by having a look at the facebook page in those browsers with the developer toolbar

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.