I have an absolute positioned div in a relative positioned div. I want the inner div to overflow on the x-axis, but not on the y-axis.
<html>
<head>
<style>
#wrapper {
width: 100px;
height: 100px;
background-color: blue;
position: relative;
overflow-y: hidden;
overflow-x: visible;
}
#wrapper div {
width: 50px;
height: 50px;
position: absolute;
right: -25px;
bottom: -25px;
background-color: red;
}
</style>
</head>
<body>
<div id="wrapper">
<div></div>
</div>
</body>
</html>
I get cropping or overflow with scrollbars in IE7, IE8, Firefox3, Chrome of the inner div on the x-axis which is not what I want.
I feel I must surely be doing something wrong. Is there a way to accomplish my requirements?
What I was trying to do is not possible given html4 + css implementations at the time.
I needed to use an alternative approach.