Mise en place

Les images sont positionnées en dures afin de bien visualiser la situation.
Les images de droites se voient attribuer un alignement à droite via css :
- text-align:right; sur les class .c2 et .c3
Les bordures rouges sont là afin de bien visualiser l'ensemble.

On positionne à présent les images de droite en hauteur par rapport aux images de gauche.

On met en place les bordures.
- la bordure du haut en image de fond du cadre .c1
- la bordure de droite en image de fond du cadre .c2
- la bordure du bas en image de fond du cadre .c3
- la bordure de gauche en image de fond du cadre .content*

(*) .c4 étant en dernier dans l'imbrication des div il n'a pas la hauteur voulu pour avoir lui aussi une bordure ... on l'applique donc à l'élément .content qui lui a la hauteur du contenu.

On retire les images en "dur" dans le code html
On insère des balises 'span' qui vont recevoir les images des coins en 'background'.