Horizontal Scrolling within a div
<div style="border: 1px solid black; width: 410px; height: 400px; overflow: auto" id="panecontainer"> <div id="pane1" style="float: left; height: 20px; width: 210px; overflow: hidden">Column 1</div> <div id="pane2" style="float: left; height: 20px; width: 210px; overflow: hidden">Column 2</div> </div>
What I want that code to do is have a div with div "columns" inside it. Obviously, the combined width of the columns is greater than the outer div, but I want it just to make a horizontal scrollbar (hence the overflow: auto) if that occurs.
What is actually happening is nothing like that. The two columns are appearing not laid out horizontally, but one on top of the other. I was sure that float: left should have fixed that, but it doesn't seem to.
Any ideas for a frustrated developer? ;)