CODEWITHSUNDEEP
htmlcsscss-position
TechyDude
TechyDude

Reputation: 1165

Why are relative divs not generating height?

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.

Upvotes: 3

Views: 5490

Answers (1)

Sean Redmond
Sean Redmond

Reputation: 4114

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.

Upvotes: 3

Related Questions