CSS - position: absolute; - auto height

Question

I am having a problem with some div\'s

The outer div has a min-height, but the inner divs are all varying heights. Because the inner divs are absol

Answer 1

Test display: inline-block on the element that need auto height.

Answer 2

Here is a long overdue cross-browser solution to your problem. No more static width, no more em hack.

<style>
  /* clearfix */
  .container:after {
    content: '';
    display: table;
    clear: left;
  }

  .page {
    float: left; /* display side-by-side */
    width: 100%; /* be as wide as parent */
    margin-right: -100%; /* take up no width */
  }
</style>

<div class="container">
  <div class="page"></div>
  <div class="page"></div>
</div>

After searching for a solution to this problem for so long, I am baffled to see how simple it is. Granted, the .page elements are not absolutely positioned. However, all the same goals can be achieved through this method, with almost no pain or sacrifice.

Here's a demo: https://jsfiddle.net/eqe2muhv/

This also works for inline-blocks, of course. Though you might need to set the font-size or letter-spacing of the container to 0. I would also recommend using vertical-align: top on the .page, to simulate a regular block element.

Here's a demo: https://jsfiddle.net/dzouxurs/8/