Floating a child in a overflowed parent with ie7

Question

Hi,

So I got some divs... The aim here is to play with some hide-show effects.

<div class="container">
    <div class="move">
        Some dynamic content...
    </div>
</div>



.container {
    width:100px;
    height:100%;
    owerflow-y:hidden;
}


.move {
    width:300px;
    height:100%;
    float:right;
}

The issue is that in ie7 the float right doesn't work. the .move div will stick left.
Is there any way to fix this ?

Thanks.

Answer 1

It is because your containers width is less than the contents.

ifyou choose the width of .container bigger, you'll see the effekt is working. If you want the .move to be in the container by DOM-Tree but not on the screen, use position: absolute.

Answer 2

You can use text-align:right instead of float:right with your current widths(Inner DIV with More than the Outer DIV width).