Question

I’m reading a book (Agile Web Development With Rails) and I’m encountering a problem on page 96.

I’ve stuck to the code in the book exactly, but I get this.

I know another way to approach this is to use a table, but I want to know if there is another solution first.

Answer 1

I would organize these comments using divs. The first div to house the image and comment. The second div to house the image. And the third to house the comment.

The html:

<div class="comment-container">

  <div class="comment-img">
    <!whatever code you use to pull images from the database>
  </div><!ENDcomment-img>

  <div class="comment-field">
    <!whatever code you use to pull comment content from the database>
  </div><!ENDcomment-field>

</div><!ENDcomment-container>

The CSS:

 .comment-container{
     padding: 5px; 
     border-bottom: 1px dashed #009fe4; 
     margin: 2px 0 5px 0;
  }

 .comment-img{
     float: left;
     width: 80px;
     height: auto;
  }

 .comment-field{
     width: 700px;
     height: auto;
     padding: 0 0 0 10px;
  }

I hope this helps out.

@subm0ral