quelques problèmes de style

Question

http://img263.imageshack.us/img263/6803/32007451.jpg http://img263.imageshack.us/img263/6803/32007451.jpg

J'ai deux problèmes avec ma boîte de friendlisting. 1. Les images ont une largeur de 100 pixels mais leur hauteur est variable. Problème ici est, friendlisting div ne s'étend pas avec la hauteur de l'image comme il se doit. En conséquence, l'image est surmontée sur la bordure inférieure. 2. Le div de Commonfriends doit s'étendre en hauteur et remplir complètement la boîte de liste d'amis. N'arrive pas.

J'ai passé des heures à résoudre ces deux problèmes, mais je n'ai pas pu le faire. Tout conseil apprécié!

Mon html

<div class="friendlisting"> 
           <a href="#"><img src="http://www.hurriyet.com.tr/_np/3375/8623375.jpg" alt="xxxx" class="profile" /></a> 
           <div class="userinfo"> 
            <span><strong><a href="#">George Lexington</a></strong></span> 
            <span>Bruges, Belgium</span> 
           </div> 
           <div class="commonfriends">13 common friends</div> 
           <div class="tools"> 
            <span><img src="images/icons/user_add.png" />Add to friend list</span> 
            <span><img src="images/icons/email_edit.png" />Send Message</span>  
           </div>       
          </div> 

css

#content .friendlisting { min-height:40px; padding:5px 0 5px; border-bottom:1px solid #DDD; } 
#content .friendlisting img.profile { float:left; width:100px; } 
#content .friendlisting .userinfo { float:left; width: 200px; padding:10px; } 
#content .friendlisting .userinfo span { display:block; } 
#content .friendlisting .commonfriends { float:left; width:150px; height:100%; background:#ffe996; } 
#content .friendlisting .commonfriends:hover { background:#FEDF62; } 
#content .friendlisting .tools { float:left; width:160px; } 
#content .friendlisting .tools span { display:block; } 

Answer 1

vous pouvez essayer d'utiliser un div de compensation comme ceci:

<div class="friendlisting"> 
    <a href="#"><img src="http://www.hurriyet.com.tr/_np/3375/8623375.jpg" alt="xxxx" class="profile" /></a> 
    <div class="userinfo"> 

     <span><strong><a href="#">George Lexington</a></strong></span> 
     <span>Bruges, Belgium</span> 
    </div> 
    <div class="commonfriends">13 common friends</div> 
    <div class="tools"> 
     <span><img src="images/icons/user_add.png" />Add to friend list</span> 
     <span><img src="images/icons/email_edit.png" />Send Message</span>  
    </div> 

<div style="clear:both;"></div> 
</div> 

ou si vous ne aimez pas le style en ligne

.clear 
{ 
    clear:both; 
} 

puis <div class="clear"></div>