I am currently facing an issue related to the layout of my webpage. There is a @page media mentioned along with a floating <div> element placed at the top of the page. Inside this <div>, there are an <img> and a <p> tag (which contains the image's caption). The image floats towards the left, while the caption floats towards the right within the parent container:
<div style="float:top;">
<img style="float:left;" ... />
<p id="caption" style="float:right;">
...
</p>
</div>
This arrangement places the image on the left side of the parent <div>, with the caption positioned to the top-right of the image.
In certain scenarios where the image height is substantial compared to the caption length, I would prefer the caption to be displayed at the bottom-right corner of the parent <div>. A workaround could involve utilizing padding-top: ...pt for the caption, but this assumes knowledge of the image height, which may not always be feasible due to scaling.
Is there a way through CSS or other methods to consistently position the caption at the bottom-right of the parent <div> regardless of varying image heights?