Question

We have two DIVs, one embedded in the other. If the outer DIV is not positioned absolute then the inner DIV, which is positioned absolute, does not obey the overflow hidden of the outer DIV.

#first {
    width: 200px;
    height: 200px;
    background-color: green;
    overflow: hidden;
}

#second {
    width: 50px;
    height: 50px;
    background-color: red;
    position: absolute;
    left: 250px;
    top: 250px;
}

<div id="first">
    <div id="second"></div>
    <div id="third"></div>
</div>

Is there any chance to make the inner DIV obey the overflow hidden of the outer DIV without setting the outer DIV to position absolute (cause that will muck up our complete layout)?
Also position relative for our inner DIV isn’t an option as we need to "grow out" of a table TD.

#first {
    width: 200px;
    height: 200px;
    background-color: green;
}

#second {
    width: 50px;
    height: 400px;
    background-color: red;
    position: relative;
    left: 0px;
    top: 0px;
}

<table id="first">
    <tr>
        <td>
            <div id="second"></div>
        </td>
    </tr>
</table>

Are there any other options?

Answer 1

Make outer <div> to position: relative and inner <div> to position: absolute. It should work for you.