CODEWITHSUNDEEP
htmlcss
Boris
Boris

Reputation: 10234

DIV height to GROW UP based on inner elements

HTML: 

<div id="wrapper">

  <div id="left" style="position: relative; min-height: 300px;">
    <div id="fullBarrels" style="position: absolute; bottom: 0;">
      <div class="fullBarrel">
        <img class="barrel" src="Not Used.png" />
      </div>
      <div class="fullBarrel">
        <img class="barrel" src="Not Used.png" />
      </div>
      <div class="fullBarrel">
        <img class="barrel" src="Not Used.png" />
      </div>
      <div class="fullBarrel">
        <img class="barrel" src="Not Used.png" />
      </div>
      <div class="fullBarrel">
        <img class="barrel" src="Not Used.png" />
      </div>
      <div class="fullBarrel">
        <img class="barrel" src="Not Used.png" />
      </div>
      <div class="fullBarrel">
        <img class="barrel" src="Not Used.png" />
      </div>
      <div class="fullBarrel">
        <img class="barrel" src="Not Used.png" />
      </div>
    </div>
  </div>

  <div id="center">
    <img src="70.png" />
  </div>

  <div id="right">
    <div class="emptyBarrels">
      <div class="emptyBarrel">
        <img class="barrel" src="Used.png" />
      </div>
    </div>
  </div>

</div>

CSS:

#wrapper {
  background: orange;
  margin: 8em auto 1em auto;
  max-width: 1000px;
  padding: 10px;
  overflow: hidden;
}

#center {
  background: red;
  float: left;
  height: 300px;
  width: 30%;
}

#center img {
  height: 300px;
}

#left {
  background: yellow;
  float: left;
  width: 35%;
}

#right {
  background: brown;
  float: left;
  width: 35%;
}

#message {
  background: gray;
  margin: 0 auto;
  max-width: 1000px;
  padding: 10px;
}

.fullBarrel {
  float: left;
  display: inline-block;
  height: 100px;
  background: blue;
  margin: 0.5em 0.5em 0 0;
}

.emptyBarrel {
  float: right;
  height: 100px;
  background: green;
  margin: 0.5em 0 0 0.5em;
}

img.barrel {
  height: 100px;
}

How do I make the yellow div (id="left") grow up with the content inside of it? The items are being added from the bottom up - correctly, but the yellow div is not growing beyond the min-height, which is making the inner elements be cut off.

enter image description here

See how the blue divs are going beyond yellow? They are aligning to the bottom of the yellow div, though. I would like to have the blue ones bottom align to the yellow, and for yellow to grow up in order to make room for additional blue ones (and also for the orange wrapper). It seems the height of the yellow div is fixed to min-height even though it does not have the actual height.

Upvotes: 1

Views: 602

Answers (2)

Boris
Boris

Reputation: 10234

Using flex solves this and causes no headache whatsoever. Highly recommended.

Upvotes: 1

none
none

Reputation: 63

Try not defining the height of #wrapper. That should do it. I think.

EDIT: Another approach (which is not that clean to be honest) would be to wrap everything in a table cell. Those adjust to their contents in height and width. If width="100%", however, there should be no problem.

Upvotes: 0

Related Questions