Placer une div à droite d'un Hx et d'un p

Bonjour,

Je suis en train de construire une liste de commentaires pour mon site, je me débrouille à peu près en css et html, mais là, j'avoue ne pas trouver la solution.

Je voudrais construire chaque commentaire comme suit:
VISUEL

Si il n'y avait pas le bloc "divers" (comment-note) à droite, je n'aurais pas de problème, mais là j'ai essayé plusieurs choses (du float, du inline...), mais rien ne convient vraiment (tjs un léger bug, décalage...).

Voilà comment j'ai structuré ma liste, au niveau css:

#comments .user-picture {
    float: left;
    margin-right: 10px;
    padding: 3px;
}

#comments .user-picture span {
    display: block;
}

#comments .comment-content {
    margin-left: 130px;
    padding: 0;
}

#comments .comment-content h3 {
    width:70%;
}

#comments .comment-note {
	width: 18%;
    margin-left: 74%;
    padding: 10px;
    background-color: #F8F8F8;
}

#comments .comment-content p {
    margin: 0;
    padding: 0;
    word-wrap: break-word;
}

#comments .comment-separe {
    height: 6px;
} 

Et au niveau html:

<div class="content-inner">
		<div class="user-picture">
		<span></span>
		</div>
	
		<div class="comment-content">  		      		
    		<h3></h3>
    		
    		<div class="comment-note"></div> 

<p>texte</p>   
		</div>
	
	<div class="comment-separe"></div>    
</div>

Quelqu'un pourrait il me mettre sur la voie pour placer ce "comment-note" ? C'est lui qui me pose problème...

Merci d'avance
Modifié par Piuu (04 Oct 2012 - 22:15)

Bonjour,

L'image d'aperçu que tu as fourni n'est pas visible.
On va avoir du mal à comprendre ton problème sans exemple du rendu souhaité.
Modifié par Spacedementia (04 Oct 2012 - 20:21)

J'avais mis entre des balises img mais ça ne marchait pas en effet, j'ai donc mis en lien

Un sujet similaire qui peut peut être t'aider.

Essai peut être de mettre ton div "comment-note" avant ton "h3" et de le faire flotter à droite.