Float mistake in arbitrary-width div positioned absolutely - css

Question

again a problem with IE browsers version 6 and 7
Take a look at an example right away, try resizing the window and such.
a preview (easier to open in IE this way)
code
HTML:
<div class="container">
<div class="left-menu">
<ul>
<li>El1</li>
<li>Element 2</li>
<li>3</li>
</ul>
</div>
<div style="margin-right: 60px;">Тест Тест</div>
</div>
CSS:
.container{
position:absolute;
top:100px;
left:100px;
outline: 1px solid red;
background-color:pink;
}
.left-menu{
outline: 1px solid green;
background-color:#AAA;
width: 50px;
float: right;
}
Now I don't understand 2 things
What happens to the float element? the box is never too small, infact the margin of the adjacent div is bigger than the width of ul div. But when the window is small enough the float element appears to be floating to the window edge not its container edge, but if you scroll a little to the right when the window is small you will see the container is wide enough.
Less important issue why is it this wide? Shouldn't it be as wide as it's contents?
The only fix I've come up with is to give my absolute div a width, but there is the problem. It should resize with the contents say if there is a picture near the float div.
And there will be a picture =) This width workaround of course allows to use tons of javascript, to resize every element in the more complex structure than shown in the example, but i wonder may css be used instead?

Answer 1

Internet Explorer has issues with divs and floats, especially older versions of IE. Whenever I have problems with floats and divs not clearing each other properly, I rely on the Clearfix method.
Add the clearfix css to your main css file, then append the class .clearfix to .container so it looks like <div class="container clearfix">.
For the 2 divs inside, take the margins and widths off of them, if you want those 2 divs width to change based on the content inside them. Float one div left, and float the other div right.
You'll see that the Clearfix forces the parent div (.container) to wrap all the way around the floated elements inside.
Hope this helps!