Question

I am working on a comment system and design is my weak area, So far though I am getting very close to the look I am going for, my code is below.

There is my CSS code and my div’s that make up the comment section, I have stripped out all the fancy stuff as I am just having n alignment issue and it is present in the below code.

For the comment post there is 2 columns,

Left column will have a user’s photo and names and stuff
Right column will have the comment and the date and some admin stuff

My problem is that I need the contents in both columns to vertically align even
right now the left column is like 1 block space higher then the right column

Can someone please show me or help me to align it the same?

Here is a phot also to show the alignment issue, notice the photo on the left does not align with the text on the right
alt text http://img2.pict.com/4e/fe/9b/1486749/0/screenshot2b16.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 10px 10px 10px;
    width: 950px;

}

ol.commentlist li div.photocolumn {
    display: block;
    float: left;
    width: 120px;
}
ol.commentlist li div.commenttext {
    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;
}
</style>



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

        <!-- RIGHT column of the comment  -->       
        <div class="commenttext"> 
            <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 --> 
    </li>   
</ol> 

Answer 1

It’s the default margins on the paragraph element <p> that is causing you problems.

Just add:

div.commenttext p{margin:0;}

And you’ll be fine. Of course, you can tweak the margins if you need a something a bit different.