How can I position this DIV among other DIV's in CSS?

Question

I am having trouble aligning some DIV's on a comment system. Below is my current CSS code and the html along with a photo to show the problem.

In the photo the delete part on the right side of the first comment is positioned at the bottom of the comment and I need this div to be at the top. Also if you look in the second comment you will see the delete text isn't even on the right side, it is under the first div

Can someone help me to position it correctly?

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

• Add vertical-align: top; to each of your divs.

• Change those float: rights to float: left

• Add text-align: right to get the contents of a div to align right.

Also, there's a new StackOverflow-affiliated website for HTML/CSS/Web Design at http://doctype.com/