I have a listing with images. The height of the images is unknown. What would be the best properties for the div. I have tried several things (overflow: hidden) but it won’t show the images. This is what I have in the CSS:
the reason the images wont show with overflow is that you container is collapsed when you AP the images, as the image container is taken out of the normal flow.
I am assuming the reason you are APing the image is because you want that slide out effect. But since the image is the determining factor maybe that you should AP the text ( you might need a wrapper) instead?
when you give position absolute to an element it get taken out of the normal flow ( it also gets given display:block; so even declaring display:inline-block; is no use). if you want the size of you container (.boxgrid ) to be depended on the size of the image you MUST remove position absolute from .boxgrid img
Hi Dresden. Thanks for the explanation. I have them positioned absolute because I wanted the add to cart buttons lined up neatly under the images (see this post) What would be the best approach to get both things right? I mean the container divs to stretch depending on the height of the images and the add to cart buttons still being lined up neatly.
the problem is that you have to sacrifice something. If you knew the height of your text (buttons), you could make space (using padding) and then AP the buttons. But I think that want an acceptable answer before.
To be hone , having been a fine artist, and working on a cart where images are almost more important than text descriptions, I would handle two whole CONCEPT differently.
Creating a grid FIXED height/width containers and then AP the image at the top and the button at the bottom. Images dont change dimensions, so the only thing you’d need to be concered about would be long lines of the in the button, which again is unlikely.