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.

Should we be looking at a link or screen shot? — Efficient Pixel over 8 years ago

I'm sorry, here's the link. http://www.casinojournal.com/Articles/Article_Rotation/BNP_GUID_9-5-2006_A_10000000000000584079 — James White over 8 years ago

2 answers

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.

could you put a max-width on the caption p element? and jiggle the numbers to get something appropriate.
which CMS is it? — Tony Crockford over 8 years ago

it's a custom cms. while it's not a perfect solution I like your idea better than what I'm doing now. Our programming group is looking at a way of storing the image sizes in the DB which would completely fix the problem. — James White over 8 years ago