DIV Containing other DIVs Problem

[terrybarnes]

I've got a containing DIV that I'd like to used to contain other DIVs - the problem is unless I add a specific height for the containing DIV then it doesn't wrap around the DIVs inside.

If I simply add text to the container DIV then it will be ok.

I wanted to have the height of the Container DIV to be automatic but I don't seem to be able to do that.

Any ideas, or an example bit of CSS that works would be very much appreciated.

[terrybarnes]

I've noticed now it's only when I add the Float: Left attribute to anything in the container DIV.

[swa66]

That's intended behavior: non-floated blocks do not expand to contain floated children. Floated blocks are taken out of the flow. But influence the flow by pushing it aside. You can clear a float with something that's in the flow and that will achieve what you seek. e.g.
html

<div class="notfloated">
 <div class="floated">
 </div>
 <br class="clear">
</div>

and in css:

.clear {
 clear: both;
}

In IE (esp. IE6) everything is different: it sometimes will expand the parent and sometimes not, if it doesn't triggering "hasLayout" is often the easiest solution (add somethign like "zoom:1" (a proprietary IE only thing) in a conditional comment.

[edited by: swa66 at 1:42 am (utc) on Dec. 17, 2008]

[terrybarnes]

Thanks for this - I was just about to reply to the topic again myself. I've noticed that if I have a float:left on the container div then everything else contained within that is okay. I noticed it on this post: [webmasterworld.com...]