Force browser to always scroll horizontally? - css

Question

Is there a way to force a browser to always scroll horizontally?
Without setting a fixed width on any divs?
I've made it so that the Div in question (which contains a table) will scroll with:
overflow-x:auto;
But I need the browser scroll bars to be used, and not scroll bars on the div itself.
The page code looks similar to this:
<div id="content">
<div id="MenuContainer">
.....various divs for menu
</div>
<div id="TableContainer">
...ASP Gridview that renders a table
</div>
</div>
I want to be able to make the page scroll horizontally using the browsers scroll bars, Firefox does this already with the code as it is, but IE6,7,8 all force the content in the "TableContainer" div to go below the menu.
The menu and the table container are both floated left.

Answer 1

Try to set this:
{overflow-x:scroll}
on the body of css

Answer 2

I presume you're using floats just now? you can force floats to sit side by side in IE7 by triggering hasLayout (zoom: 1;) but not in IE8 so I'd use the table display properties instead of floats and feed IE7 the floated version with the hacks or put the IE7 properties in a conditional CSS
try this:
#MenuContainer {
float: left !ie7;
display: table-cell;
min-width: 300px;
background: #cfc;
}
#TableContainer {
zoom: 1 !ie7;
display: table-cell;
}
added jsfiddle