Probléme de mise en page avec css - besoin de conseil

Je souhaiterais stylé cette mise en page sur un titre "h1"
http://kweb13.free.fr/Inbox.png

j'ai procédé comme ceci :

<div id="titrePreview">
	<h1>{$page->titres(-1)}</h1>
	<div class="filet">&nbsp;</div>
</div>

div#titrePreview { overflow:hidden; width:753px; height:30px; padding:1em;}
div#titrePreview h1 { display:inline-block; float:left; margin:0; line-height:0.8em;}
div#titrePreview div.filet { background: url('../images/h1.png') no-repeat;}

Voici le résultat:
http://kweb13.free.fr/titre.PNG

Comment puis-je faire pour que mon div.filet, puisse commencer à gauche de la fin de mon h1 et surtout que mon div.filet prenne toute la largeur qu'il reste.

Merci de vos conseil.

essaye en mettant tes deux div intérieur en display:inline-block
et enlève le float:left dans le premier

div#titrePreview { overflow:hidden; width:753px; height:30px; padding:1em;}
div#titrePreview h1, div#titrePreview div.filet { display:inline-block; }
div#titrePreview h1 { margin:0; line-height:0.8em;}
div#titrePreview div.filet { background: url('../images/h1.png') no-repeat;}

quand tu mets un float, il sort plus ou moins du flux et ça peut faire apparaitre le problème que tu rencontres