overflow-x scroll not working css

css, html

Solution

give parameters to width and height, so container can overflow.

http://jsfiddle.net/f5HWD/3

.container{
    width: 900px;
    height: 700px;
    display:table;
    margin: 0 auto;
    overflow:scroll;
}

Problem

I am trying to align two divs horizontally and I got it to work using `display:inline-block` however when I put overlfow-x:scroll to the main container it doesn't work. If the screen is smaller, one of the div goes to the bottom. How can I achieve this? I don't want the second Div to go to the bottom if the screen is small. Here's fiddle ``` <div class="container"> <div class="test1">test1</div> <div class="test2">test2</div> </div> .container{ display:table; margin: 0 auto; overflow-x:scroll; } .test1{ background-color:red; width:500px; margin-left:16px; display:inline-block; } .test2{ margin-left:40px; display:inline-block; background-color:gray; width:80px; vertical-align:top; } ```

Original source