div inside another with an exceeding part - html

Question

I'm looking for a way to have a fixed div inside another, from which a part of it exceed without horizontal scrolling.
Maybe it will be easier to understand with this: http://jsfiddle.net/pF4Qx/
html:
<div id="global">
<div id="inner"></div>
</div>
css:
#global{
margin: 0px auto;
width: 300px;
height: 300px;
position:relative;
top: 0px;
background-color: #ff0000;
}
#inner{
width:100px;
height: 100px;
position: absolute;
background-color: black;
right: -50px;
top: -50px;
}
The black div is inside the red div, but in my project, the red div is in fact the outside container of my website and is 1024px large, so I don't want this ugly horizontal scroll when my browser window is 1024px large, but just want this "outside" part of the black div to be hidden.
I've tried to solve this by putting an overflow parameter, and even tried to put this black div outside with a fixed or absolute position, But I can't find a better result...

Answer 1

#global{overflow: hidden;} works fine for me in this case

Answer 2

As SW4 mentioned in the comments, add overflow: hidden; to the parent div global properties in your CSS.

Answer 3

Putting an overflow:hidden; on your container (#global) gets the job done.

Answer 4

Not sure if i understood your question correctly, but try putting this in your stylesheet:
html{overflow-x:hidden;}
That should do the trick. Keep in mind that this is not really friendly for people with smaller screens or zoomed in browser windows.

Answer 5

I finally found a great solution (I think) to solve my problem:
html:
<div id="inner"></div>
<div id="global">
</div>
css:
#global{
margin: 0px auto;
width: 300px;
height: 300px;
position:relative;
top: 0px;
background-color: #ff0000;
z-index: -1;
}
#inner{
width:100px;
height: 100px;
position: relative;
background-color: black;
margin: auto;
z-index: 2;
left: 150px;
top: 50px;
}
Here is the updated fiddle: http://jsfiddle.net/pF4Qx/4/
Hope this will help someone ;)