CODEWITHSUNDEEP
cssposition
ABDO Zeidane
ABDO Zeidane

Reputation: 63

Css absolute div under absolut div same class

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:

enter image description here

And here is what I'm getting:

enter image description here

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

Upvotes: 0

Views: 72

Answers (1)

Marcos Brinner
Marcos Brinner

Reputation: 207

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>

Upvotes: 1

Related Questions