Question

I have a 2 column grids. In column 1, there will be multiple instances of one div. Inside the one div there are two divs positioned absolutely – a number and a description. For some reason when I have multiple divs, they stack ontop of one another, which is because the ‘template’ div has no height.

Why a height is not automatically generated by the content within that div?

.main {
  position: relative;
  margin: 25px 0;
  display: block;
}

.col1 {
  width: 200px;
  position: absolute;
  left: 0;
}

.col2 {
  width: 200px;
  position: absolute;
  right: 0;
}

.indicator {
  width: 10px;
  height: 10px;
  background-color: #0f0;
  color: #454;
  position: absolute;
  left: 0;
}

.text {
  position: absolute;
  right: 0;
}

.box {
  position: relative;
}

<div class="main">
  <div class="col1">
    <div class="box">
      <div class="indicator">
        1
      </div>
      <div class="text">
        Text text text text text text text text text text text text text text text text text text text text text text text text text.
      </div>
    </div>

    <div class="box">
      <div class="indicator">
        1
      </div>
      <div class="text">
        Text text text text text text text text text text text text text text text text text text text text text text text text text.
      </div>
    </div>

    <div class="box">
      <div class="indicator">
        1
      </div>
      <div class="text">
        Text text text text text text text text text text text text text text text text text text text text text text text text text.
      </div>
    </div>

    <div class="box">
      <div class="indicator">
        1
      </div>
      <div class="text">
        Text text text text text text text text text text text text text text text text text text text text text text text text text.
      </div>
    </div>

  </div>

  <div class="col2">
    Col 2 content.
  </div>
</div>

​Fiddle:
http://jsfiddle.net/techydude/UcFXX/1/

This is a very basic question, but I would rather understand the reasoning behind the issue without creating a work around by adding height.

Answer 1

Absolute positioning removes the element from the “flow”, so as far as its parent is concerned, it’s not really there and it isn’t calculated as part of the parent’s height.