CODEWITHSUNDEEP
htmlcss
BadgerHobbs
BadgerHobbs

Reputation: 340

Position Relative Divs, Containing Absolute Divs Below Each Other

I have multiple relative positioned divs, which contain 3 absolute positioned divs each. Currently, they are shown to overlap each other and not below.

JSFiddle

How do I position them below one another?

Each parent div is like below.

<html> 

  <div style="background: #F2F2F2; padding: 10px; border-radius: 50px; position: absolute; width: calc(100% - 30px); height: 15px;">

  </div>

  <div style="background: #2CA2B7; padding: 10px; border-radius: 50px; text-align: left; position: absolute; width: 20%; height: 15px;">

    Item1

  </div>

  <div style="background: #D0CECE; padding: 10px; border-radius: 50px; text-align: left; right: 0%; position: absolute; width: 60%; height: 15px;">

    Name1

  </div>

</div>

Upvotes: 0

Views: 852

Answers (4)

maxim
maxim

Reputation: 626

Your parent divs all have the height = 0, because all theirs children are absolute positioned, so they don't occupy any space.

A solution would be to add height to the parent divs... or even better to make them display: flex and remove the absolute positioning from the children.

Upvotes: 1

BadgerHobbs
BadgerHobbs

Reputation: 340

Solved by adding margin-bottom:50px in increments of +50px to each relative div.

Such as below.

<div style="position: relative; margin-bottom:150px;" class="projectSidebarSelectedProjectInformation-Stats">

Upvotes: 0

George Simos
George Simos

Reputation: 1

If you want to display each div on a separate line and below each other, you should not use position: absolute;. You could use margin-top: 15px to separate them from each other. In order to use position: absolute; you need to define at least one of top, left, bottom or right.

Upvotes: 0

&#192;tishking
&#192;tishking

Reputation: 273

i didn't really understand what you are trying to do. but you can give the div's with absolute position a specific top - like this

  <div style="background: #F2F2F2; padding: 10px; border-radius: 50px; position: absolute; width: calc(100% - 30px); height: 15px;">

  </div>

  <div style="background: #2CA2B7; padding: 10px; border-radius: 50px; text-align: left; position: absolute; width: 20%; top: 50px; height: 15px;">

    Item1

  </div>

  <div style="background: #D0CECE; padding: 10px; border-radius: 50px; text-align: left; right: 0%; position: absolute; width: 60%; top: 100px; height: 15px;">

    Name1

  </div>

Upvotes: 0

Related Questions