First off these are images coming from a client via a CMS and can be any size or shape. No big deal. I'll just use the inline-block display attribute and move along. Well, not so fast. IE7 has issues with that. It will display at 100% of the parents width. So I need to use jQuery to find the width of our images and set the parent span to the same width. While working through this issue I found out that webkit browsers (Chrome and Safari) do not actually know any DOM element dimensions during $(document).ready. You have to wait a little longer and let the page be drawn out by using $(window).load. That makes sense to me, but I am curious why this is not the same across the board.
Lastly, we have to account for the client setting the image to float left or right in the CMS and transfer those values to the parent. I decided to do that by passing the float value as a class. I have basic styling like float direction and corresponding margin values.
So enough talk. Here is the code: