Question

I am looking at adding an image along with a title / caption.
I am looking to keep the title above the image semantically, but below it visually, any idea how to do this with CSS and HTML only?

http://jsfiddle.net/jamesgorrie/vRxuB/9/

Baring in mind that the title needs to be able to be dynamic in size, as does the paragraph. The paragraph can be above or below the image semantically, but below the header semantically and visually.

UPDATE: The image size cannot be assumed.
The closest so far I have got is: http://jsfiddle.net/jamesgorrie/vRxuB/23/

Answer 1

Why dont you do something like:

<figure>
        <img src="yay.jpg" alt="">
        <figcaption>
                yay!!!
        </figcaption>
</figure>

This is perfectly semantic HTML5