Display inline block issues

Display inline block issues

I have a two divs aligned side to side and they work as I want them on
desktop but when it comes to mobile browser (it works on chrome mobile as
the desktop one) like Mozilla Firefox, Safari one of the divs push to the
bottom. I have tried setting overflow:scroll to the div container but that
doesn't solve the prob. Can someone help me out?
css
.container{
margin: 10px auto 20px auto;
display:table;
overflow:scroll;
}
.left_col{
width: 700px;
border:1px solid #C0C0C0;
display: -moz-inline-stack;
display: inline-block;
background-color:#fff;
vertical-align:top;
zoom: 1;
*display: inline;
}
.right_col{
width:300px;
border:1px solid #C0C0C0;
display: -moz-inline-stack;
display: inline-block;
height:1090px;
background-color:#fff;
vertical-align:top;
zoom: 1;
*display: inline;
}
html
<div class="container">
<div class=left_col"></div>
<div class="right_col"></div>
</div>