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

Question

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

<style type="text/css">
    #container {
        border: 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:

Get the #container to properly wrap around the children divs.
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.

FYI, you aren't `float`ing, you are `position`ing. There's a huge difference. — Kevin Peno, May 06 '11 at 18:19
@Kevin I know that, just making an aside comment that floats & positioning are two of the most confusing parts of CSS, it seems. — CaptSaltyJack, May 06 '11 at 18:21

score 2 · Answer 1 · edited May 23 '17 at 11:55

2

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

edited May 23 '17 at 11:55

Community

1
1

answered May 06 '11 at 18:18

Erick Petrucelli

14,386
8
64
84

Ha.. I see we're in the same boat. Bummer. – CaptSaltyJack May 06 '11 at 18:21
@CaptSaltyJack, it's the answer. There you will see how to do it. – Erick Petrucelli May 06 '11 at 18:28

score 2 · Accepted Answer · answered May 06 '11 at 18:24

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>

Very nice. Of course, I forgot to mention that I need to not specify a height on anything at all. So I've modified your code and used jQuery to dynamically set the heights to all match the largest item in the container. http://jsfiddle.net/csaltyj/X3EJ6/1/ — CaptSaltyJack, May 06 '11 at 18:31
@CaptSaltyJack, same issue exists if you want borders to appear inside the parent. You will need to subtract any padding, borders, and margins on `.box` from the `innerWidth` of `#container` — Kevin Peno, May 06 '11 at 18:46

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

2 Answers2