Outer Div does not scroll even if inner-Divs width exceed parent width

I've this code :

.outer
{
width: 1000px;
float: left;
overflow: scroll;
}

.inner
{
    width : 500px;
    float:  right ;
}
<div class='outer'>
    <div class='inner'>
        .....
    </div>
    <div class='inner'>
        .....
    </div>
    <div class='inner'>
        .....
    </div>
</div>  

I want to float those inner divs to right , ( one beside the other ) , and enable scrolling o开发者_如何学运维n the outer div when inner-Divs' width exceed parent width

Is my question clear ?

Thanks guys.

---

I think what you want is something like this: http://jsfiddle.net/cWpGS/2/.

Note the properties prefixed with * are needed for IE7. You should apply these two properties with an IE7 specific stylesheet instead of what I did here.

As Alejandro mentions, using floats you cannot achieve what you need. Instead, use inline-block and set nowrap to the parent div. Reset the wrap on the inner divs and you're done.

---

In the example you posted the inner divs have a width of 500px, and the outer div a width of 1000px, so you will not see any scrolling bars anyway. Setting the inner divs to 1000px and the outer div to 500px, you should remove the "float:right" attribute to see the horizontal scrollbar. You can place the divs at the right side with a "margin-left:auto;" instead, but in this case it does not make any sense because the inner divs are greater than the outer div