I recently had to develop some functionality, for use within a CMS, that allowed an author to float an image with a caption to the left or right of a body of text. An easy task, right? I thought so too, until I noticed that my extra long test caption wasn’t respecting the width of my max-height image. See the last image in the pen for an example of this.
It took some Googlin’ and a long slog through some terrible Stack Overflow answers to find my preferred solution, which was a creative use of the
display: table-caption; and
caption-side: bottom; declarations.
Since this markup is being generated by a CMS, I am able to conditionally apply CSS classes, which I use to set the respective styles for an image with a max-width value versus an image with a max-height value.
I am also setting inline styles for the authored pixel values, which is a necessary evil of working with a CMS. Obviously a pragmatic approach was needed (and taken) to meet the requirements. If you find yourself in a similar situation, I hope this pen will save you some time and frustration while developing your own solution.