I'm in an unusual css situation, the html CAN NOT be altered. Let me explain briefly... Calibre is a program which provides tools for ebooks / ebook readers, among it's capabilities is the ability to run 'recipes' (python code) which the user community have created. These enable the downloading of -typically- news web sites and blogs, and conversion into an ebook format for reading on your ebook reader.
Recipe's provide functionality for keeping and removing sections of the original html - in the recipe I am writing for instance I keep-only the div class 'story-body' (and everything within it) for each page, this then becomes the body of the individual html pages which are used to build the ebook. Although I can't change the html, css can be added to change the look of the page.
I have a problem formatting the images for the ebook's pages. The html looks like this example:
<img src="/image/path/image.jpg" width="226" height="282" alt="Alt Text" />
<span style="width:226px;">Caption to accompany image</span>
The html is consistent - the span style width is always set to the same width as the image.
What I need to do is to construct some css to position the image neatly with the descriptive caption text below the image. One problem is that the images vary is size substantially, some are just 200px in width, others as much as 800px. So I can't float a box on one side using 40% of the width of the page, as some large images will be of a size which is as much as 90% of the width of an ebook's total width.
What I would like is for the image to be centered horizontally with the caption text positioned below the image and with the caption text extending either no wider than the image itself, or no wider than an extra 15% on each side of the image. Achieving this without being able to change the html has proved very hard for me - after all I am a software developer not a web developer, and I've almost no css experience. I spent over 3 hours trying to achieve this yesterday and failed dismally - now it's time to ask the pros.
One thing to note by the way is that in the recipe it is possible to automatically remove html tag attributes. So in the code snippet above I could have the width="226" and/or height="282" removed from the img tag or the style="width:226px;" removed from the span tag. As stated, any css which I want can be added.
Please help, I've been pulling my hair out over this one.