Side elements without using tables

Question

I noticed that StackOverflow is resorting to using a table layout for the comment area under the posts:

Notice that the text remains 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 tabular layout, and fail. Is there a good way to 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/

Answer 2

.sidebyside { float: left} <div class="sidebyside"> <input type="button" value="VoteUp" /><br /> <input type="button" value="Flag" /> </div> <div class="sidebyside">Text</div> 

Isn't it that simple?

EDIT

Your example (fixed):

 <div style="overflow: hidden;"> <div style="float: left;">Left Content</div> <div style="float: left; width: 100px;">Right Content Right ContentRight Content Right Content Right Content Right Content Right Content Right Content Right Content Right Content Right Content Right Content Right Content Right Content Right Content Right Content Right Content Right Content Right Content Right Content Right Content </div> </div> 

Answer 3

Alternative solution: http://jsfiddle.net/7JukV/

Just for the sake of alternatives ... :)