Make relative div have content size

Question

strong text

.inside{
position: absolute;
background-color:red;
top:0px;
left:0px;
width:200px;
height: 200px;
}
.inside2{
height: 210px;
background-color: blue;
}
.inside3{
height: 220px;
background-color: black;
}
.box {
  position: relative;
}

<html>

<body>
    <div class="box">
      <div class="inside"></div>
      <div class="inside"></div>
    </div>
  <div class="box">
    <div class="inside inside2"></div>
    <div class="inside inside2"></div>
  </div>
  <div class="box">
    <div class="inside inside3"></div>
    <div class="inside inside3"></div>
  </div>
</body>

</html>

So I have 2 div(inside class) that overlap, its size is unfixed (it maybe 200px or 210px ...). I already make it overlap using positive: absolute and set the box to be relative. The problem with the box is it have 0px height so these boxes just overlap the same position (instead 3 individual box). How to fix it:

What i want:

Possible duplicate of http://stackoverflow.com/questions/28296389/how-to-contain-position-absolute-div ? — Roko C. Buljan, May 29 '16 at 15:31
i don't know this simple problem must be solved by js. Do you know any css way? — cdxf, May 29 '16 at 15:37
You cannot contain `position:absolute;` children. That's what `absolute` is for. — Roko C. Buljan, May 29 '16 at 15:40

score 1 · Answer 1 · answered May 29 '16 at 16:17

if I understand your problem, then you need to use a combination of display: table-cell for .box and float: left for .inside:

.inside{ width:50px; float: left; }
.inside1 { height: 220px; background-color: red; }
.inside2 { height: 210px; background-color: blue; }
.inside3 {  height: 200px; background-color: black;}
.box { position: relative; display: table-cell; border: 1px solid red; }

<div class="box">
  <div class="inside inside1"></div>
  <div class="inside inside2"></div>
  <div class="inside inside3"></div>
</div>

[ https://jsfiddle.net/2akhf3fo/ ]

Make relative div have content size

1 Answers1