Question

I have a #comments element which contains .comment elements. I would like to have 5 vertical lines from left to right, each 1px in width, 100% height (till the end of the #comments element), with 20px between them and without images. I tried to do that myself, but my CSS-fu isn’t that high. Any help would be much appreciated.

HTML:

<div id="comments">
    <div class="comment level1">Lorem ipsum dolor sit amet</div>
    <div class="comment level2">Lorem ipsum dolor sit amet</div>
    <div class="comment level3">Lorem ipsum dolor sit amet</div>
</div>

CSS:

#comments {
    width: 400px;
    border: 1px solid black;
}
.comment {
    margin: 10px 0;
}
.level1 {}
.level2 { margin-left: 20px; }
.level3 { margin-left: 40px; }

Demo.

Here’s how I imagine it:

|[comment      ]
|  |[comment   ]
|  |[comment   ]
|  |  |[comment]

Answer 1

Is there some reason you need to have all the divs as direct children of the outer parent div? If you nest the divs you can accomplish this very easily:

css:

div div {
    border-left: 1px solid black;
    padding-left:20px;
}

nested html

<div id="comments">
    <div>Lorem ipsum dolor sit amet</div>
    <div>Lorem ipsum dolor sit amet
        <br/>
        <div>Lorem ipsum dolor sit amet
            <br/>
            <div>Lorem ipsum dolor sit amet
                <br/>
                <div>Lorem ipsum dolor sit amet</div>
                <div>Lorem ipsum dolor sit amet
                   <br/>
                   <div>Lorem ipsum dolor sit amet</div>                
                </div>
            </div>
        </div>
    </div>
</div>

updated fiddle showing how it would look here nested down to 5 levels:

http://jsfiddle.net/webchemist/tuZB6/4/