outer <div>(s) not expanding to fit float <div>

[muke]

I have this series of outer <div> elements used to create a nice rounded edge border look but once I add a float element inside then the outer <div> elements act as if nothing is there. I understand that the parent <div> is supposed to ignore any float. My question is how to make the outer <div> fit to the size of the inner float <div>
Here is a sample:



***CSS File***
.b {background: url(images-jpgs/dot.jpg) 0 100% repeat-x}
.l {background: url(images-jpgs/dot.jpg) 0 0 repeat-y}
.r {background: url(images-jpgs/dot.jpg) 100% 0 repeat-y}
.t {background: url(images-jpgs/dot.jpg) 0 0 repeat-x;}
.bl {background: url(images-jpgs/bl.jpg) 0 100% no-repeat}
.br {background: url(images-jpgs/br.jpg) 100% 100% no-repeat}
.tl {background: url(images-jpgs/tl.jpg) 0 0 no-repeat}
.tr {background: url(images-jpgs/tr.jpg) 100% 0 no-repeat; padding:10px;}


*** HTML File ***
<div style="float:left;margin:3% 0% 0% 30%;width:30%;">
<div class="t"><div class="b"><div class="l"><div class="r">
<div class="bl"><div class="br"><div class="tl"><div class="tr">
<div style="float:left;margin:2% 0% 0% 5%;">
BlahBlahBlahBlah
BlahBlahBlahBlah
BlahBlahBlahBlah
</div>
</div></div></div></div></div></div></div></div>
</div>



Thanks in advance for any help.

[jscheuer1]

You need to include an empty division with the style:

clear:left;

below any floats and as the last item within a container that you want to expand to the size of the left float(s):


<div style="float:left;margin:3&#37; 0% 0% 30%;width:30%;">
<div class="t"><div class="b"><div class="l"><div class="r">
<div class="bl"><div class="br"><div class="tl"><div class="tr">
<div style="float:left;margin:2% 0% 0% 5%;">
BlahBlahBlahBlah
BlahBlahBlahBlah
BlahBlahBlahBlah
</div>
<div style="clear:left;"></div>
</div></div></div></div></div></div></div></div>
</div>

At least that is one place it could go. Hard to say for sure. Just put it after the last float that you want to make fill out its container.

If you were floating right, you would clear:right;. If floating in both directions, you would clear:both;.

However, since your corners depend upon floating, you may not be able to do this without messing them up. If so, consider using another method of of positioning the content.

[muke]

I'll give it a whirl...thx John.

[muke]

it seems to work....thx again.
This might be asking too much but how exactly did that fix the problem?

[jscheuer1]

No, not at all. You see, when you float something it has native height, but by virtue of being floated is taken out of the flow of the page, that's why it floats. It is a little like position absolute, which also has native height, but is out of the flow of the page. With absolute positioning though, there is no way to resume the natural flow of the page short of giving it a container, but then the height is that of the container. With floats however, we have the clear property. What that does is to make sure that the element with the clear property is below the float, it clears it in the same way that a pilot with enough altitude clears a mountain top, only turned upside down. If that (clear) element isn't floating, the normal flow of the page will be restored below it as well.

[muke]

that makes sense...thx again.