How to contain position absolute div?

Question

I have this fiddle here and this is the illustration below

what I need to achieve is to make the black container dynamically expand base on the item inside (the items are A, B, C) the output must be

without setting the height statically

my html is

<div class="container">
    <div class="itemA">A</div>
    <div class="itemB">B</div>
    <div class="itemC">C</div>
<div>    

my css is

.container{
    position:relative;
    width:200px;
    min-height:300px;
    background-color:black
}
.itemA{
    position:absolute;
    top:260px;
    background-color:red;
    width:30px;
    height:30px;
}
.itemB{
    position:absolute;
    top:50px;
    right:90px;
    background-color:green;
    width:30px;
    height:30px;
}
.itemC{
    position:absolute;
    top:220px;
    right:50px;
    background-color:blue;
    width:30px;
    height:30px;
}

Answer 1

You can use this script. First compute the max height then set the height of the container

$(function(){
  var y = 0;
  $('.container .item').each(function(){
    y = Math.max(y, $(this).height() + $(this).position().top);
  });

  $('.container').css('height', y);
});

.container{
    position:relative;
    width:200px;
    min-height:200px;
    background-color:black
}
.itemA{
    position:absolute;
    top:260px;
    background-color:red;
    width:30px;
    height:30px;
}
.itemB{
    position:absolute;
    top:50px;
    right:90px;
    background-color:green;
    width:30px;
    height:30px;
}
.itemC{
    position:absolute;
    top:220px;
    right:50px;
    background-color:blue;
    width:30px;
    height:30px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container">
    <div class="itemA item">A</div>
    <div class="itemB item">B</div>
    <div class="itemC item">C</div>
<div>

Answer 2

I prefer to using jQuery so here it is, "borrowed" this answer's code as its pretty much what we need. Just made some small changes.

So we look at the parents children div and get the farthest child position, add that child's height and then set the parents height to that. Boom, done.

var t = 0;
$(".container div").each(function() {

  var position = $(this).position();
  if (position.top > t) {

    // Get the position and the height so we can set the parent height
    t = position.top + $(this).height();
    $('.container').height(t);
  }
});

.container {
  position: relative;
  width: 200px;
  min-height: 200px;
  background-color: black
}
.itemA {
  position: absolute;
  top: 260px;
  background-color: red;
  width: 30px;
  height: 30px;
}
.itemB {
  position: absolute;
  top: 50px;
  right: 90px;
  background-color: green;
  width: 30px;
  height: 30px;
}
.itemC {
  position: absolute;
  top: 220px;
  right: 50px;
  background-color: blue;
  width: 30px;
  height: 30px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="itemA">A</div>
  <div class="itemB">B</div>
  <div class="itemC">C</div>
</div>

Answer 3

In js you can have the position of each absolute-positionned elements. I wrote you a script that find the biggest value horizontaly and verticaly and apply this width and height to the container : http://jsfiddle.net/45atnh0u/7/ Its basically use $(this).offset().left and $(this).offset().top

But be carrefull with the right and bottom values.

Answer 4

The closest is to give the container overflow: hidden , then move your elements left right top bottom in the dimensions of your container . If the container has width 200px you move element left 200px - element width and it shall remain in your container.

Updated fiddle:

.container{
    display: block;
    position:relative;
    width:200px;
    min-height:200px;
    background-color:black;
    overflow: hidden;
}
.itemA{
    position:absolute;
    top: 0;
    left: 170px;
    background-color:red;
    width:30px;
    height:30px;
}
.itemB{
    display: block;
    position:absolute;
    top:50px;
    right:90px;
    background-color:green;
    width:30px;
    height:30px;
}
.itemC{
    display: block;
    position:absolute;
    bottom: 0;
    right:30px;
    background-color:blue;
    width:30px;
    height:30px;
}

http://jsfiddle.net/45atnh0u/8/

Answer 5

As mentioned above JS might be a better fit, but I thought a quicker way with just CSS might also appeal.

The idea is for the container to take the height of the body.

Add

body {
    height: 100%;
    position: absolute;
}

and change your container height to

min-height:100%;

Here's an updated fiddle.

Hope it helps you.