Horizontal Scrolling within a div

I've done stuff like this (my problem) numerous times before, but all of a sudden it doesn't want to work for me anymore, and since you AW grid is the best example I can find of it anywhere, I'm hoping you can lend some much needed assistance before I pull all my hair out of my head.

<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? ;)

The easiest way to solve this is just use simple old table (maybe with 'table-layout: fixed'. Othervise I would use absolute positioning in this case (instead of float).

I wanted to stay away from the tables, which is why I was using DIVs instead. The weird thing is that I have done layouts like this a lot before, so I don't know what I'm doing differently this time.

I know that your grid's cells are all divs, how do you make them all line up properly?

.TableDiv
{
overflow-y : hidden;
POSITION : relative;
OVERFLOW : auto;
WIDTH : 100%;
}

Use the above in the style sheet for the class associated to div and it will work.
I think by now u would have already found a solution

If you can tolerate it, I put a fixed length horizontal rule inside a 1x1 table above my content to force the Div not to wrap, in my case, thumbnail images.

thanks for this code


.TableDiv
{
overflow-y : hidden;
POSITION : relative;
OVERFLOW : auto;
WIDTH : 100%;
}



it helps in my case