Link to Example: http://johnharrisdesign.com/test/
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.
Here is What I Found:
I am currently trying to figure out how to use this.
This what this code currently looks like in Firefox 3.
This is what I want it to look like. (without the border and lines obviously :))
red border = .product-row
teal line = alignment
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).
You must be logged in to reply to this topic.
*May or may not contain any actual "CSS" or "Tricks".