In my mind the above example should look like a grey box with #x not going past the edge and #y poking out the bottom.
But it's not like that - apparently setting overflow-x: hidden; causes overflow-y: scroll | auto;.
Is there any way around this?
I need to allow certain elements to escape the bounding box without setting overflow: visible on #box.
#y can't break out of its bounding box without being taken out of the flow of the document. Does adding position: absolute; to #y give the effect you're after?
Update
Restructured HTML example, including a containing box to allow everything to be easily positioned together. Try it out here: http://jsfiddle.net/GfNbp
<div id="container">
<div id="box">
<div id="x"></div>
</div>
<div id="y"></div>
</div>
#box {
width: 100px;
height: 100px;
margin: 10px;
background: #ededed;
padding: 10px;
/* ADD THE OVERFLOW */
overflow-x: hidden;
overflow-y: visible;
}
#container{
position: absolute;
top: 30px;
left: 20px;
}
#x {
width: 150px;
height: 10px;
background: #c1ffb2;
}
#y {
width: 10px;
height: 150px;
background: #c4b2ff;
position: absolute;
left: 20px; /* margin+padding */
top: 30px; /* margin+padding+x-height */
}
#y to be relative to #box
#y out of context. It has the same effect as not adding position: absolute. Thanks for your answers!
#y to be a child of #box as you don't want it to be bound by it in any way, just positioned next to it. Take it outside of the box (ha ha) and it's a simple case of positioning.
position:absolute to #y makes it work on Chrome 7. Since you said it needs to be relative to #box, does #box have any special positioning? As far as I tried, if you leave it on default, it works.Here's what I have, and it works:
#box {
position:absolute;
width: 100px;
height: 100px;
margin: 10px;
background: #ededed;
padding: 10px;
/* ADD THE OVERFLOW */
overflow-y:visible;
overflow-x:hidden;
}
#x {
width: 150px;
height: 10px;
background: #c1ffb2;
}
#y {
width: 10px;
height: 150px;
background: #c4b2ff;
position: fixed;
}
body { height: 1000px; } to the example.position: fixed; makes the block relative to viewport; not what OP wants.I think the problem is your height: 100px in the outer div. If you remove this height attribute, do you get the result you're looking for?
Otherwise, I think batwad's probably knocked the nail on the head using three divs.
