CSS box height stretch problem

[geebee2008]

Hi
I'm having an issue with trying to get a 1 pixel keyline box to stretch to the height of content within the box. The code creates a keyline box with rounded corners around content. The box stretches fine if the content inside is just plain text, but if i add divs <b>with floats</b> around the content inside the box it will no longer stretch to the height of the content -- the content will go the length of the page, but the box won't adjust to the height of the content. One note here: it works fine with divs around the content, it's only when I try to float them for positioning that this problem comes up. Any ideas here are greatly appreciated.

Here's the code I'm working with:



<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 class="lft">
LEFT CONTENT HERE
</div>

<div class="rgt">
RIGHT CONTENT HERE
</div>

</div></div></div></div></div></div></div></div>


and here's the styling:



.t {background: url(dot.gif) 0 0 repeat-x; width: 20em}
.b {background: url(dot.gif) 0 100% repeat-x}
.l {background: url(dot.gif) 0 0 repeat-y}
.r {background: url(dot.gif) 100% 0 repeat-y}
.bl {background: url(bl.gif) 0 100% no-repeat}
.br {background: url(br.gif) 100% 100% no-repeat}
.tl {background: url(tl.gif) 0 0 no-repeat}
.tr {background: url(tr.gif) 100% 0 no-repeat; padding:10px}
.lft {
float: left;
width: 345px;
padding: 0 25px 0 0;
line-height: 16px;
}
.rgt {
float: right;
width: 140px;
font-size:11px;
color:#666666
}


The original article on this method can be found here: http://www.webcredible.co.uk/user-friendly-resources/css/css-round-corners-borders.shtml

[geebee2008]

You have to clear all floats at the bottom of the content within the box. Doing so will stretch the outer div to encompass all content within the box. Hope this helps someone who might be having the same issue.