CODEWITHSUNDEEP
htmlcss
Quintin B
Quintin B

Reputation: 5881

Independantly position div's within a parent div

I am trying to put 3 div children inside a parent div, where they have exact positions, and the children are not concerned about their siblings. I am trying to create a simple example, but all the child divs are relating to their siblings. 

.parent {
  position: relative;
  height: 224px;
  width: 224px;
  border: 32px solid lightgrey;
}

.child {
  position: absolute;
  height: 64px;
  width: 64px;
}

.child1 {
  top: 32px;
  left: 32px;
  background-color: aqua;
}

.child2 {
  top: 32px;
  left: 128px;
  background-color: lightgreen;
}

.child3 {
  width: 160px;
  top: 128px;
  left: 32px;
  background-color: black;
}
<div class="parent">
  <div class="child child1" />
  <div class="child child2" />
  <div class="child child3" />
</div>

Where I have tried looking:

Upvotes: 0

Views: 40

Answers (1)

Yosef Weiner
Yosef Weiner

Reputation: 5751

This works when closing the <div> tag with </div> rather than using a single <div />.

This is because in HTML5, the slash at the end of non-void tags (like div) are forbidden and ignored. So your original code is interpreted as each child being nested inside the previous one; hence each one is relative to its prior "sibling" (actually, its parent).

JSFiddle

Upvotes: 1

Related Questions