css/html necessary to create forum style message - html

Question

can anyone tell me any guides/hints for the css/html necessary to create a layout similar to the
message part of a forum:
------------------------
[8] User1
Some msg
------------------------
[8] User2
Another message
------------------------
Is this 1 main div and several child divs or something simpler like a css styled listitems or table, etc?
Please let me know the "correct" way to achieve this layout without newest css3/html5/beta code

Answer 1

An Example:
<style>
.message {margin-bottom: 15px; }
.image {float:left; margin-right: 10px; }
.user {float:left; font-weight:bold; color:#009; margin-bottom: 5px; }
.content { margin-left: 30px;font-style:italic; color:#; }
</style>
<div>
<div class="message">
<div class="image"><img src="http://www.gravatar.com/avatar/df125f7b89730a39163bb17c1c18c1d9?s=18&d=identicon&r=PG" /></div>
<div class="user">Silvertiger</div>
<div style="clear:both;"></div>
<div class="content">Does this work as expected?</div>
</div>
<div class="message">
<div class="image"><img src="http://www.gravatar.com/avatar/98d247dcb9453a0d5adc70cd6b3acde9?s=18&d=identicon&r=PG" /></div>
<div class="user">user2309722</div>
<div style="clear:both;"></div>
<div class="content">Indeed sir it appears to, Thank you</div>
</div>
</div>

Answer 2

Something like this would work:
<div id="thread">
<div class="thread-post">
Post #1 contents
</div>
<div class="thread-post">
Post #2 contents
</div>
<div class="thread-post">
Post #3 contents
</div>
</div>
And for CSS, you would do something like:
.thread-post {
padding: 10px
border-bottom: 1px solid #ddd
}
.thread-post:nth-child(even) {
background-color: #eee /* For distinguishing every other post */
}
Modify as needed.

Answer 3

I would go with one div for each couple author info + message, then, inside of each it would be some kind of floating left div for the box containing author info (username, avatar, etc) (as it is usually seen on forums but the style is up to you) along with another div to contain the linked message.

Answer 4

I did it like this : DEMO
<div class="box">
<div class="list">AAAAAAAAAAAAAAA</div>
<div class="list">BBBBBBBBBBBBBBB</div>
<div class="list">CCCCCCCCCCCCCCC</div>
<div class="list">DDDDDDDDDDDDDDD</div>
</div>
With css as :
.box {
position: absolute;
border: 2px solid grey;
}
.list {
line-height: 30px;
}
.list:not(:last-child) {
border-bottom: 1px solid red;
}