CODEWITHSUNDEEP
htmlcss
StriplingWarrior
StriplingWarrior

Reputation: 156728

Side-by-side elements without using tables

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

enter image description here

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?

Upvotes: 7

Views: 1331

Answers (3)

gutierrezalex
gutierrezalex

Reputation: 828

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/

Upvotes: 2

slandau
slandau

Reputation: 24102

.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 just as simple as this?

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>

Upvotes: 1

sv_in
sv_in

Reputation: 14049

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

Just for the sake of alternatives... :)

Upvotes: 0

Related Questions