Question

I’ve noticed that StackOverflow resorted to using a table-based layout for the comments area beneath posts:

Notice how the text all stays to the right of the button area, regardless of how many lines of text there are. I am trying to accomplish the same effect using a table-less layout, and failing miserably. Is there any good way to do achieve this without tables?

Answer 1

I think this is a good start:

<div class="comment-row">
    <ul class="icon-set">
        <li class="icon-1"><a href="">icon</a></li>
        <li class="icon-2"><a href="">icon</a></li>
    </ul>
    <div class="comment">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
</div>

CSS:

.comment-row { position relative; }
.icon-set { position: absolute; }
.icon-set a {
    display: block;
    text-indent: -99999px;
    border: 1px solid;
    width: 16px;
}
.comment { margin-left: 30px; }

Live Sample:
http://jsfiddle.net/HPbFJ/