CODEWITHSUNDEEP
cssbackgroundlinevertical-alignment
daGrevis
daGrevis

Reputation: 21333

Vertical lines with CSS

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]

Upvotes: 1

Views: 1103

Answers (1)

WebChemist
WebChemist

Reputation: 4411

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/

Upvotes: 1

Related Questions