Footer overlapping to sibling that has relative position with child absolute position

Asked Nov 25 '16 at 06:34

Active Nov 25 '16 at 06:58

Viewed 114 times

the child's height is more than it's parent div. Do we have some trick for this? or alternative solution.

i just simplified the codes. i also have codepen here you see it in the codepen that the child is overlapping to footer. I want the footer to go below the child.

html

<div class="wrapper">
<div id="sibling-1">
  <div class="child"></div>
</div>
<footer id="sibling-2"></footer>
</div>

css

.wrapper {
  height: 500px;
  background: pink;
}
#sibling-1 {
  background: grey;
  height: 200px;
  width: 300px;
  position: relative;
}
.child {
  position: absolute;
  background: green;
  width: 250px;
  height: 300px;
}
#sibling-2 {
  width: 300px;
  height: 200px;
  background: blue;
}

edited Nov 25 '16 at 06:58

asked Nov 25 '16 at 06:34

Jayrex

1

You have 105 reputation.. so you have to know how to ask question...Please add some code.... – Minal Chauhan Nov 25 '16 at 06:36
Please put some code to show what you have done and where you have stuck at.Nobody can answer by just providing a hint about the problem – XYZ Nov 25 '16 at 06:42
need to simplify first because it's not appropriate to put all the codes here. – Jayrex Nov 25 '16 at 06:43
Possible duplicate of [Expand Parent Div To Child Height](http://stackoverflow.com/questions/384145/expand-parent-div-to-child-height) – Roger Ng Nov 25 '16 at 07:06
doesn't work for me. – Jayrex Nov 25 '16 at 07:48

Footer overlapping to sibling that has relative position with child absolute position

0 Answers0