More CSS woes: how to stack divs inside another div, and have them all behave?

Fiddle here: http://jsfiddle.net/csaltyj/mbnWm/

<style type="text/css">
    #container {
        bo开发者_运维技巧rder: 2px solid #000;
        position: absolute;
        width: 20em;
    }

    .box {
        background: transparent;
        position: absolute;
        border: 1px solid #0f0;
    }
</style>
<div id="container">
    <div class="box">
        <p>X</p>
        <p>Taller than the other two.</p>
    </div>
    <div class="box">
        <p>&nbsp;&nbsp;&nbsp;Y</p>
    </div>
    <div class="box">
        <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Z</p>
    </div>
</div>

This is not working. They overlap fine, but there are issues. The goal is to:

1. Get the #container to properly wrap around the children divs.
2. Have the .box divs fill (width & height) the parent #container (so the green borders should reach all the way out to the thick black border).

This must be possible, I'm just having a hard time with positioning. (that and floats seem to be the toughest parts of CSS)

Thanks for any help.

The problem you have here is that anything that is position: absolute; is removed from flow. Thus, #container can never contain the .boxes. In this cause you will need to set height and width on #container and make sure the .boxes can never expand beyond it. You requested they fill the #container, so I've done that here: http://jsfiddle.net/X3EJ6/

Note though that because width and height are set to 100% the borders will not work correctly. You will need to set explicit values or use box-sizing and set it to border-box (this is not support in IE < 8).

<style type="text/css">
    #container {
        border: 2px solid #000;
        position: absolute;
        width: 20em;
        height: 10ex;
        overflow: hidden;
    }

    .box {
        background: transparent;
        position: absolute;
        border: 1px solid #0f0;
        width: 100%;
        height: 100%;
    }
</style>
<div id="container">
    <div class="box">
        <p>X</p>
        <p>Taller than the other two.</p>
    </div>
    <div class="box">
        <p>&nbsp;&nbsp;&nbsp;Y</p>
    </div>
    <div class="box">
        <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Z</p>
    </div>
</div>

How to make children auto fit parent's width only with CSS?