Welcome!

[Althalos]

I'm trying to make a simple list of comments. I have the following:

Code: Select all

<div class="box">
         <div class="comment-left">
            <img src="images/avatar.jpg" class="avatar-comment" />
         </div>
         <div class="comment-right">Comment one</div>
      </div>
      <div class="box">
         <div class="comment-left">
            <img src="images/avatar.jpg" class="avatar-comment" />
         </div>
         <div class="comment-right">Comment two</div>
   </div>

And I have the following CSS:

Code: Select all

#comments div.box {
   padding: 5px;
   margin: 5px 0;
   background-color: #CCC;
}
.comment-left {
   float: left;
   width: 60px;
}
.comment-right {
   float: right;
   width: 550px;
}

But it doesn't work because the height of div.box equals only one line height.

1) Why doesn't the height of div.box stretch its height?
2) anyone has a better suggestion on how to make the comment list (needs to have room for avatar, message, author & date), or any tutorials?

Thanks

[Simon J.]

1) You have to clear. So do something like that:
CSS

Code: Select all

.clear {
   clear: both;
}

HTML

Code: Select all

<div class="box">
   <div class="comment-left">
      <img src="avatar.jpg" class="avatar-comment" />
   </div>
   <div class="comment-right">
      Comment two
   </div>
   <div class="clear"></div>
</div>

2) I would do this:
CSS

Code: Select all

.comments li {
   padding-bottom: 1em;
   clear: left;
}

.comments .avatar {
   float: left;
}

.comments .message, .comments .meta {
   margin-left: 100px; /* width of the avatar */
}

HTML

Code: Select all

<ol class="comments">
   <li id="comment-1">
      <img class="avatar" src="avatar.jpg" alt="Avatar" />
      <p class="meta">
         <span class="author">John Doe</span>
         <span class="date">2001-05-23</span>
         <a href="#comment-1">#</a>
      </p>
      <p class="message">
         Comment one.
      </p>
   </li>

   <li id="comment-2">
      <img class="avatar" src="avatar.jpg" alt="Avatar" />
      <p class="meta">
         <span class="author">John Doe</span>
         <span class="date">2001-05-23</span>
         <a href="#comment-2">#</a>
      </p>
      <p class="message">
         Comment two.
      </p>
   </li>
</ol>

[Andy]

1) You have to clear. So do something like that

Don't introduce markup just to clear floats. Use overflow: hidden on .box instead.

[Simon J.]

@ Andy: Wow! Thats cool! Thanks for mentioning.

[Althalos]

Thanks

[Ivan Sampedro]

This is a cool page