Question

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 on the outer div when inner-Divs’ width exceed parent width

Is my question clear ?

Thanks guys.

Answer 1

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.