: Div collapsing over repositioned element I want a list of rows that have the following look to them: +------------------------#main-----------------------+ |
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.
More posts by @Deb1703797
2 Comments
Sorted by latest first Latest Oldest Best
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.
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.
Terms of Use Create Support ticket Your support tickets Stock Market News! © vmapp.org2024 All Rights reserved.