marge negatief geeft problemen

Allereerst: Gebruik de goede tags:

<figure>
    <img src="...">

    <figcaption>
        <img src="logo">
        <h1>Demo</h1>
    </figcaption>
</figure>

Vervolgens kun je figure de width van de afbeelding geven en relatief positioneren en dan kun je figcaption absolute positioneren aan de onderkant.

Denk er wel om dat HTML 5 tags niet in IE8 worden ondersteund. Daar is een javascript genaamd modenizer of dergelijke voor die die er voor zorgt dat het in IE alsnog goed word weer gegeven.

Daar is een javascript genaamd html5shiv voor nodig. Modernizr heeft onder anderen wel het html5shiv ding in zich, maar ook nog heel heel veel andere dingen die je nu denk ik niet nodig hebt.

@Wouter J
Sorry maar ik snap niet goed wat je bedoelt, ik het je code gebruikt maar het menu zit nog steeds ver onderaan

http://jsbin.com/EkeBOBU/1/watch

bedankt

Kan ook zonder classes, puur op de HTML-elementen. En met minder CSS. Zo hoef je niet de afmetingen van je afbeelding erin te gooien. Dat doet de browser gewoon direct (schaalt dus makkelijker mee).
Zo maak je het gelijk op al je <figure>'s.

Met een kleine animatie (hover er maar overheen): http://jsbin.com/uMEGeGA/1/

Eddy, ik raad af te stijlen op elementen. Stel ik heb 1 figure element op mijn pagina die ik anders wil stijlen, dan zit ik al in de knel doordat deze al heel veel andere stijlen meekrijgt door mijn globale element stijlen. Daarom raad ik altijd aan alles, op inline element als <b> na, te stijlen met klassen. Zodra je stijlen moet reseten ben je net 1 stap te globaal bezig geweest.

Zit wat in Wouter.

Mocht om 1 <figure> gaan die je anders wil, dan stijl je die toch apart op ID?
Hoef je ook alleen maar de wijzigingen aan te geven. Scheelt een hoop code, al is het inderdaad minder 'modulair' dan alles via classes/id's gooien.

Daarnaast kan je natuurlijk met ::first-child of ::nth-child(4) of ::last-child ook een hoop bereiken.
Zeker als je een vaste opbouw van je pagina hebt.