I'm working with a very unforgiving CMS, and people who have no concept of valid HTML entering content into said CMS. So I apologize for presenting invalid code.
I'm trying to find a way to align images of varying widths and their captions to left, right or center. The way our CMS is set up I can't use any sort of server side solution to store/determine file size.
As you can see I have set a static width to the containing div (BNP-IMAGE), this is not an ideal solution as we would like to be able to use larger images in some cases.
I'm thinking it should be able to be done with JS, but I'm not sure exactly how.
This is just thinking aloud, but couldn't you set min-width on the div (and use an expression for IE (http://www.gunlaug.no/contents/wd_additions_14.html) ) and some margin on the image. You could also set max-width and use overflow:hidden to trap any ridiculously large images.
That way the width of the div, which sets the width of the caption would grow to accommodate larger images.
if you had more control over the html, I'd suggest sticking with the fixed width container and inline-styling the image as a background, which allows you to crop larger images with css.
With min-width the div flows to the length of the caption text.