(I asked a similar question here and found a working solution under certain circumstances, however the parameters for this design quandary have changed, so I've decided to start a new thread)
I'm trying to find a way-- either via pure css or with the help of javascript-- to vertically align a block of multi-line text alongside an image, as depicted here. As shown in the demo, the text block will be smaller in height than that of the image, so I'd like it to float in the middle (as is the default in table layouts.) A key point in my situation is being able to achieve this effect without defining a height for a containing div-- i.e. only defining an image height-- as I'm basically trying to build a long thumbnail list with a small image and descriptive text floated alongside-- and needing to define a height for each containing div would be problematic.
It's remarkable to me that something so easily achieved with tables is such a massive undertaking via CSS; and of the myriad solutions I've found via google, most of the pure-CSS approaches as well as many JS-assisted ones require a declaration of height for the container. Also, the convenient "display:table-cell" css method does not work in IE.
I'm open to any solutions here, eg. via jQuery etc-- thanks much for any help; I would imagine others would benefit from the uncovering of a working solution to this problem as well.
