How to contain one div inside another?

[peiklk]

I'm stumped on this one... One minute it looks right, then it falls apart.

One is the correct CSS for one div to reside inside another and have the outer div grow and shrink with the inner div?

<div class=outer>
<div class=inner>
VARIABLE DATA AND TEXT
</div>
</div>

What properties on outer should I set to insure it grows as I add content into inner?

[yannis]

Just add width:auto on the outer.

[Xapti]

Well if the inner div is absolutely positioned or floated, then the outer div will collapse, but I'll assume that's not the case.

Width:auto is the default, yannis. It makes the div span it's maximum width, not a minimum width.

This kind of question is asked quite a bit, but I can't really understand why. I think it's due to a low understanding of web layout.

You say you want a div to grow to fit to content... What kind of content is it? if it's text, how is it supposed to know where it should make a new line? in that case you need to specify the width, since content wraps vertically. If it's other things like videos or images, chances are it will be a fixed size, and again you can specify the size.

In the case where it's an image or other object which isn't always the same size, then just floating the outer div should fix the issue, although one may need to float both (it may not be consistant across browsers). Realize that I don't think it's an official solution though, since floated elements are supposed to be assigned widths. In this case (not sure if it's in the W3C standard, or just a quirk browsers revert to when missing width), the float is collapsed to the intrinsic width of the replaced element in question (object, img, input, etc), plus stuff like padding.

[swa66]

If inner is floated or otherwise removed from the flow outer should collapse. But ... IE doesn't follow the standard, so i guess that's where the question and lack of understanding of the standard comes from.

Perhaps best to show some minimal CSS that shows the problem. and doesn't.

[rocknbil]

Welcome aboard peiklk, there are three ways I've found to active this: 1) float both the parent and child divs, because a floated div will always "shrink wrap" it's children, 2) use the overflow property, or 3) put a clearing div at the bottom of the inner div. More details in last post here [webmasterworld.com].