Css absolute div under absolut div same class

Question

I woul like to show a list of comments and for each comment its list of comments and so on:

here is my HTML code:

<div class='comment'>
    <div class='titre'>Titre d'un commentaire statique</div>
    <div class='content'>
        Qui cum venisset ob haec festinatis itineribus Antiochiam, praestrictis palatii ianuis, contempto 
    </div>
    <div class='subComments'>
        <div class='comment'>
            <div class='titre'>Titre d'un sous commentaire statique</div>
            <div class='content'>
                Qui cum venisset ob haec festinatis itineribus Antiochiam, praestrictis palatii ianuis, contempto Caesare, quem videri decuerat, ad praetorium cum pompa sollemni perrexit morbosque diu causatus nec regiam introiit nec processit in publicum, sed abditus multa in eius 
            </div>

        </div>
    </div>
</div>  


<div class='comment'>
    <div class='titre'>Titre d'un commentaire statique</div>
    <div class='content'>
        Qui cum venisset ob haec festinatis itineribus Antiochiam, praestrictis palatii ianuis, contempto Caesare, quem viderncipem
    </div>      
</div>

and here is my CSS:

.comment{
    //border: solid 1px blue;
    width: 580px;
    border-radius: 6px;
    position: absolute;
    padding-left: 50px; 
}

.titre{
    font-size: 1.2em;
    color: blue;
    padding: 12px;
}

.content{
    padding: 12px;
}

.subComments{
    border: solid 1px blue;
    width: 580px;
    border-radius: 6px;
    position: absolute;
}

Here is what I wanna get:

And here is what I'm getting:

Now I get the two comments superimposed!! Any help is appreciated.

Answer 1

Now it will works as your image, i chaged the border to border-top and position:absolut to float:left

html

<div class='limit'>
<div class='comment'>
<div class='titre'>Titre d'un commentaire statique</div>
<div class='content'>
Qui cum venisset ob haec festinatis itineribus Antiochiam, praestrictis palatii ianuis,     contempto 
</div>
<div class='subComments'>
<div class='comment'>
    <div class='titre'>Titre d'un sous commentaire statique</div>
    <div class='content'>
        Qui cum venisset ob haec festinatis itineribus Antiochiam, praestrictis palatii ianuis, contempto Caesare, quem videri decuerat, ad praetorium cum pompa sollemni perrexit morbosque diu causatus nec regiam introiit nec processit in publicum, sed abditus multa in eius 
    </div>

</div>
</div>
 </div>  
<div class='comment'>
<div class='titre'>Titre d'un commentaire statique</div>
<div class='content'>
Qui cum venisset ob haec festinatis itineribus Antiochiam, praestrictis palatii ianuis, contempto Caesare, quem viderncipem
</div>      
</div>
</div>

Css

<style>
.limit{
 margin:0 auto;
 width:650px;
 }
 .comment{
 //border: solid 1px blue;
 width: 580px;
 border-radius: 6px;
 float:left;
 padding-left: 50px; 
 }

 .titre{
font-size: 1.2em;
color: blue;
padding: 12px;
 }

 .content{
padding: 12px;
 }
.subComments{
border-top: solid 3px blue;
width: 580px;
float:left;
}
</style>