Test page: overflow:hidden abandons float

I've got a scenario where I want to dynamically change the number of lines of text that are visible, while it wraps around a float. The problem is that, once I make the overflow property of an adjacent block "hidden", the float is excluded from the block (i.e., the block decreases its width so that the float is no longer inside the block - see example 2). Hence, the text does not wrap around it but instead just stays to the left (or right) of the float, and not under/over it as well.

I'm trying to find a way to make this work no matter how many lines are to be shown. I can make it work if the height of the text will always be larger than the height of the float (example 3), or if the height will always be smaller than the float (example 2 or equivalent), but I don't have a solution that can handle both.

The Float

aaaa bbbb cccc dddd eeee ffff gggg hhhh iiii jjjj kkkk llll mmmm nnnn oooo pppp qqqq rrrr ssss tttt uuuu vvvv wwww xxxx yyyy zzzz AAAA BBBB CCCC DDDD EEEE FFFF GGGG HHHH IIII JJJJ KKKK LLLL MMMM NNNN OOOO PPPP QQQQ RRRR SSSS TTTT UUUU VVVV WWWW XXXX YYYY ZZZZ aaaa bbbb cccc dddd eeee ffff gggg hhhh iiii jjjj kkkk llll mmmm nnnn oooo pppp qqqq rrrr ssss tttt uuuu vvvv wwww xxxx yyyy zzzz AAAA BBBB CCCC DDDD EEEE FFFF GGGG HHHH IIII JJJJ KKKK LLLL MMMM NNNN OOOO PPPP QQQQ RRRR SSSS TTTT UUUU VVVV WWWW XXXX YYYY ZZZZ

1) This is what I start with:


			<div>

			    <div style="float:right;">The Float</div>

			    <div>aaaa bbbb cccc dddd ...</div>

			</div>

Test   overflow:visible   height:auto   overflow:visible   height:auto

2) Now I want to clip the text to 8 lines (10em). Here's the problem - the width is decreased to exclude the float. (It's the overflow parameter that does it; it does the same thing if height is auto.) As far as I understand, this shouldn't happen. Yes, it should happen - thanks to Manuel Razzari for this reference.
Test   overflow:visible   height:auto   overflow:hidden   height:10em

3) To initially get around this in Firefox, I can clip the content from the outer div instead. But this won't always do, as shown in the next example. This will work in IE if I set the height for the outer div instead of the inner, but this won't always do either, as shown in example 5.
Test   overflow:hidden   height:auto   overflow:visible   height:10em

4) But now if I clip the text to a height less than the float, say 4 lines (5em), it looks like this (doesn't work in IE).
Test   overflow:hidden   height:auto   overflow:visible   height:5em

5) If I reduce the height of the outer div instead, the float gets clipped.
Test   overflow:hidden   height:5em   overflow:visible   height:auto

Absolute Box

Hidden Box

Hidden Float

---- Some additional text that shouldn't be hidden ---- 1111 2222 3333 4444 5555 6666 7777 8888 9999

6) A (somewhat convoluted) solution, with small height. I used a hidden float in the blue box, an absolutely positioned "floating" box in the red box, and another hidden float in the red box to preserve the height. So, essentially, 3 copies of the floating block. The additional text gets hidden by the float though.
Test   overflow:visible   height:auto   overflow:hidden   height:5em

7) And with larger height. (N/A for IE)
Test   overflow:visible   height:auto   overflow:hidden   height:10em

8) And with an even larger height. But now there is blank space at the end. (N/A for IE)
Test   overflow:visible   height:auto   overflow:hidden   height:15em

Invisible Float

Visible Float

---- Some additional text that shouldn't be hidden ---- 1111 2222 3333 4444 5555 6666 7777 8888 9999