Absolute Position Negative Bottom Left

Hi all,

It's been a long time since I've posted but I've got an interesting issue going on that I can't seem to understand. I've got a container that has position:relative. Within that I've put an absolutely positioned box and set a negative bottom and right on it so that it sits just outside the bottom right of the container. Unfortunately, in all browsers I have found that the inner box is registered as part of the flow and scrollbars will initiate at the point of the box -- and not at the point of the container element.

I'm attaching a photo of what I'm talking about but if you'd like to test it yourself, here's the code:


<style type="text/css" media="screen">
#container {
width:960px;
height:500px;
position:relative;
background:#000;
}
#box {
width:400px;
height:400px;
position:absolute;
bottom:-200px;
right:-200px;
background:#eee;
}
</style>

<div id="container">
<div id="box"></div>
</div>



Has anyone come across something like this? Is there any way around it? It's pretty necessary for me to be able to have something absolutely positioned to the bottom left of a container without it disrupting the flow...

Thanks for any help ya'll can give me!

overflow:hidden; on the #container parent should do the trick

Thanks Fang,

Unfortunately that won't work because the parent is the body. Even so, adding overflow:hidden to a parent element would crop the container box so that the absolutely positioned box would be cut off. I don't want the cut off box to not be shown and I also don't want to remove the scrollbars from appearing when the window is less than the size of the container element (which is what would happen if I put overflow:hidden on the body). What I want is to be able to absolutely position a box outside of it's container element on the bottom right without it disrupting the flow -- without the window thinking there is something there and adding scrollbars to the page before the window is less than the size of the container element.

The only thing I can think to do is to use JS to add overflow:hidden to the body when the window is greater than the size of the container element, but then add overflow:visible when the window is less than the container element. It's not the greatest solution but it's the only thing I can think to do at this point.

Has anybody else had a similar issue and has found a more elegant fix?

Thanks