Comment puis-je positionner cette DIV parmi d'autres DIV en CSS?

Question

Je rencontre des problèmes pour aligner certains DIV sur un système de commentaire. Ci-dessous est mon code CSS actuel et le code HTML avec une photo pour montrer le problème.

Sur la photo, la partie de suppression à droite du premier commentaire est positionnée en bas du commentaire et j'ai besoin que cette div soit en haut. Aussi si vous regardez dans le deuxième commentaire, vous verrez le texte de suppression n'est même pas sur le côté droit, il est sous la première div

Quelqu'un peut-il m'aider à le positionner correctement?

alt text http://img2.pict.com/91/04/e8/1487396/0/800/screenshot2b17.png

<style type="text/css"> 
ol.commentlist { 
    margin-right:auto; 
    margin-left:auto; 
    padding: 0; 
    list-style-type: none; 
    width: 950px; 
} 
ol.commentlist li { 
    float: left; 
    margin: 0; 
    padding: 10px 0px 10px 0px; 
    width: 950px; 

} 
div.commenttext p{margin:0;} 
/* Makes even number comments have a different background color */ 
ol.commentlist li.thread-even { 
    background:#f6f6f6; 
    border-top:1px solid #e3e3e3; 
    border-bottom:1px solid #e3e3e3; 
} 
/* Left column with teh comment posters info and photo */ 
ol.commentlist li div.photocolumn { 
    display: block; 
    float: left; 
    width: 120px; 
    padding: 0px 0px 0px 15px; 
} 
/* Center column with the comment data */ 
ol.commentlist li div.commentcolumn { 
    position: relative; 
    float: right; 
    margin: 0 0 15px 0; 
    padding: 0 80px 0 30px; 
    min-height: 53px; 
    width: 700px; 
    border-left: 1px solid #dfe5e7; 
    overflow: hidden; 
} 
/* Right side cloumn with moderation links */ 
ol.commentlist li div.modcolumn { 
    display: block; 
    float: right; 
    width: 50px; 
    padding: 0px 0px 0px 0px; 
} 
</style> 

<ol class="commentlist"> 
    <li> 
     <!-- left column of the comment for user photo --> 
     <div class="photocolumn"> 
       A photo goes here 
     </div><!-- END left column --> 

     <!-- CENTER column of the comment -->  
     <div class="commentcolumn"> 
      <p>02/12/3009</p> 
      <p>Being new to web design, I use to have those same bad habits of starting things directly into photoshop!</p> 
     </div> <!-- END right comment column --> 

     <!-- Far right moderation column --> 
     <div class="modcolumn"> 
      Delete 
     </div> <!-- END moderation --> 
    </li> 
</ol> 

Answer 1

• Ajouter vertical-align: top; à chacun de vos divs.

• Modifier les float: right s à float: left

• Ajouter text-align: right pour obtenir le contenu d'un div à aligner à droite.

En outre, il y a un nouveau site Web affilié à StackOverflow pour HTML/CSS/Web Design à http://doctype.com/