Stretching a div to the containing div (NOT a float issue)

[Zeradin]

Hello. I am trying to this thing that'll be really cool that is have a div in the center of a page that has a width but when it needs to scroll i don't want the scroll bar to be at the edge of the div, i want it to be on the edge of the page.

 

So I set the middle div to have overflow: hidden and the containing div to have overflow: auto but then I just can't scroll. There's gotta be a way to do this, no? Here's what I got for them:

 

.twoColFixLtHdr #mainContent { 
margin: 0 0px 0 0px; 
padding: 0 30px 0 30px; 
border: 1px solid white;
width: 80%;
height: 450px;
overflow: hidden;
text-align: justify;
z-index:10 !important;
background: url(trans.png);
position: relative;
}

.twoColFixLtHdr #content-container {
margin: 0;
padding: 0;
border: none;
width: auto;
overflow: auto;
height: 450px;
background: url(hands2.png) no-repeat;
background-position:30% 90%;
}

 

if you could help that'd be great! thanks.

 

[haku]

What?

[Zeradin]

What?

 

Haha ok basically I have everything on the site not moving except a small content area in the middle. So now it's a square with a scroll bar. I wanted the scroll bar off of the square and on the side of the screen like it is on most sites. My solution was to make it have a hidden overflow on the content square and have an auto overflow on a div that has 100% width and is containing the square. My hope was to get the containing div to see that it had more content because the div it's containing is long, but I think because it is hidden it doesn't see the overflow. Is there a way around this?