Wie kann ich dieses DIV unter anderen DIVs in CSS positionieren?

Question

Ich habe Probleme beim Ausrichten einiger DIVs auf ein Kommentar-System. Unten ist mein aktueller CSS-Code und der HTML-Code zusammen mit einem Foto, um das Problem zu zeigen.

In dem Foto ist der Löschteil auf der rechten Seite des ersten Kommentars am Ende des Kommentars positioniert und ich brauche dieses div an der Spitze. Auch wenn du in den zweiten Kommentar schaust siehst du den Löschtext nicht mal auf der rechten Seite, es steht unter dem ersten div

Kann mir jemand helfen es richtig zu positionieren?

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

• hinzufügen vertical-align: top; zu jedem deiner divs.

• ändern diejenigen float: right s float: left

• hinzufügen text-align: right bekommen den Inhalt eines div rechts auszurichten.

Außerdem gibt es eine neue Stackoverflow-verbundene Website für HTML/CSS/Web Design bei http://doctype.com/