:: Forum >>

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? ;)
Daniel Vandersluis
Wednesday, April 13, 2005
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).
Alex (ActiveWidgets)
Wednesday, April 13, 2005
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?
Daniel Vandersluis
Thursday, April 14, 2005
.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
Jis
Thursday, June 16, 2005
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.
Mark Johnson
Friday, July 29, 2005
thanks for this code


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



it helps in my case
ASP Programmer
Saturday, August 19, 2006

This topic is archived.


Back to support forum

Forum search