Can't get this text over to the left

Question

I'm trying to get the "about 15 hours ago" text to the left, but can't seem to get it done. float left doesn't seem to work, and I can't decrease the margin left because then the "3 minutes ago" text will collide with the image.

Here's the html(sorry for the big mess):

<div class="comment_column_narrow">
    <div id="comment_title_39" class="comment_title">
        Do you like this song?

        <a href="/comment_titles/39" class="comment_title_delete" data-method="delete" data-remote="true" rel="nofollow">x</a>
    </div>


    <div class="comment_content">
          <a href="/profiles/45" class="comment_image"><img alt="Justin meltzer" src="/system/photos/45/tiny/Justin Meltzer.jpeg?1302075215"></a>
          <div class="textual_comment_content">
              <div class="comment_text">
                 <span class="name_link">
                     <a href="/profiles/45" class="normal">Justin Meltzer</a>
                 </span>
             Ok so this is what I think about this song: You need to switch back to your roots. You started as a rapper, and you need to remain a rapper. I respect you for your initiative to improve your flexibility but please stick to your roots. That's what makes you truly great.
              </div>
               <span class="comment_footer">
             <ul>
            <li class="list_style">about 15 hours ago.</li>
         </ul>
           <span>
      </span></span></div></div></div>

And here's the corresponding CSS:

.comment_column_narrow {
    float: left;
    width: 295px;
    margin-right: 5px;
}

.comment_content{
    clear:both;
    padding: 10px 5px;
    border-top:2px solid #E2E2E2;
    border-right:3px solid #E2E2E2;
}

.comment_text{
    line-height: 120%;
}

.comment_image{
    float:left;
    margin-right: 10px;
}

.comment_footer{

}

.comment_footer ul{
   margin-top: 5px;
}

.comment_footer ul li{
    font-size: 10px;
    color:gray;
    float:left;
    margin-right:25px;
}

.list_style{
    list-style:none;
}

.name_link{
     margin-left:-3px;
}

Answer 1

Instead of

this:

<div class="comment_text">
    <span class="name_link">
        <a href="/profiles/45" class="normal">Justin Meltzer</a>
    </span>
    Ok so this is what I think about this song: You need to switch back to your roots. You started as a rapper, and you need to remain a rapper. I respect you for your initiative to improve your flexibility but please stick to your roots. That's what makes you truly great.
</div>
<span class="comment_footer">
    <ul>
        <li class="list_style">about 15 hours ago.</li>
    </ul>
</span>

Move the comment_footer span INSIDE the comment_text span, so that it wraps around the image as you desire. Then remove the <ul> and <li> as they are just getting in your way. You end up with:

<div class="comment_text">
    <span class="name_link">
        <a href="/profiles/45" class="normal">Justin Meltzer</a>
    </span>
    Ok so this is what I think about this song: You need to switch back to your roots. You started as a rapper, and you need to remain a rapper. I respect you for your initiative to improve your flexibility but please stick to your roots. That's what makes you truly great.
    <span class="comment_footer">about 15 hours ago.</span>
</div>