What I’m Trying to Do:
I am trying to find a way to align text and images vertically inside a div, so that they match the alignment of their sibling in the same row (images below to alleviate confusion). Also, if the height of text changes in one div the sibling div changes accordingly so that all text and images are still aligned. IMPORTANT! -The rows need to behave independently. That way each row can grow to fit the needs of its own child divs.
What I’ve Done:
I’ve been doing some research into jQuery of how I could dynamically set equal heights for the siblings, and when one changes the other changes accordingly. However, I haven’t found anything I understand fully.
Hmm. I can’t say how to position everything. But if you don’t find the answer just try to position the "Add to cart" button to the bottom right corner (position:absolute; bottom:5px; right:5px;). I believe it will look nice too.
Because the title of the product can be more than one line, you’re almost never going to be able to line everything up properly. But perhaps you’ve been thinking about it all wrong. Check out how I’ve organized things here in the bottom two (I also think it looks a lot more pleasing to the eye):
I went to your website and it seems that you’ve done it with jquery. I think it’s the only way to do exactly what your looking for (although you could have done something a little different in pure css).