Div qui prend trop de place

Bonjour,

Je crée un blog personnel. Pour mes billets, il y a une image sur laquelle est superposée le titre. Jusque là, j'ai le résultat escompté.

Par contre, la div du titre est toujours présente sous la div image, et je n'arrive pas à me débarrasser de ce gros carré vide, comme vous pouvez le constater sur la capture ci-dessous :

http://image.noelshack.com/fichiers/2015/06/1423411731-billet.png

Le CSS de l'image :

#image-titre-billet div img {
	position: relative;
	max-width: 100%;
	max-height: auto;
	width: auto\9;
	height: auto;
}

Et celui du titre :

#image-titre-billet #billet-titre h2{
	position: relative;
	display: inline-block;
	bottom: 180px;
	padding: 16px;
	color: white;
	background-image:linear-gradient(to right, rgba(0,0,0,1) 35%, rgba(0,0,0,0.2));
	width: 100%;
}

Je vous remercie d'avance de votre aide et reste à votre disposition pour toutes informations complémentaires.