Question

I have a div inside a div and I would like to be able to scroll the inner div around. The outer div is the viewport for the inner one. The inner dive is centered vertically and horizontally and the outer div is setup with overflow:auto so scrolling kicks in if needed.

When the inner div is larger than the outer and I need to scroll I can get to the bottom right just fine, but I can’t get to the top left.

Here is a copy of what I’ve got so far. Change the size to Force Issue to make the inner div big.

CSS –
The width, height, margin-top and margin-left of #Stack are set via javascript.

/* The Stack */
#StackWrapper
{
    position: absolute;
    top: 5px;
    bottom: 5px;
    left: 330px;
    right: 5px;
    overflow: auto;
}

#Stack
{
    position: absolute;
    top: 50%;
    left: 50%;
    border: 1px solid black;
    background-image: url('../images/stripes.png');
}

Answer 1

Your DTD declaration is set inside the body (and not done correctly) along with your stylesheets.

DTD Delcaration should be above the tag.

Doing this can clear up some issues with quirks mode or things not positioning correctly.

To correct the positioning you should change the following lines of css

element.style { (set by jquery for the selection )
 height: 768px;
 margin: 0;
 padding: 0;
 width: 1024px;
}
#Stack {
 background-image: url("../images/stripes.png");
 border: 1px solid black;
 position: absolute;
}

You have to remember that everything should have a 0 margin and padding so it starts at the top left and ends at the bottom right. Your margins where causing cut off.

You may want to look into jquery to position the scroll bars to the middle if you want it to be centered.

Quick JQuery to scroll your div to the center

$("div#StackWrapper").scrollLeft(width/2);
$("div#StackWrapper").scrollTop(height/2);