Avoid an Element from being cut off when they are inside a "overflow: hidden" element

Question

I'm using the equal heights CSS trick as outlined on this page.

It was all working fine until today when I need to add a dialogue box inside one of the columns, which is absolutely positioned to take it out of the flow. The problem is that since the container has "overflow: hidden" on it, the dialogue is being cut off when it overflows.

Aside from bringing the dialogue outside of the container element, is there any possible way to get it to show via CSS?

Here's a small example demonstrating what I've mentioned.

<style>
.container { overflow: hidden; margin-top: 30px }
.col { 
    float: left;
    padding-bottom: 2000px;
    margin-bottom: -2000px;
    border-right: 1px solid black;
    width: 100px;
    background-color: grey;
}
.col.third { border-right: none }

#div-a { position: relative }
#div-b {
    position: absolute;
    background-color: red;
    width: 35px;
    height: 350px;
    bottom: 0;
    right: 0;
    margin: 5px;
    border: 2px solid black;
}
</style>

<div class="container">
    <div class="col first">
        <p style="height: 100px">One</p>
    </div>
    <div class="col second">
        <p style="height: 300px">Two</p>
        <div id="div-a">
            <!-- this gets cut off by the "overflow: hidden" on div.container -->
            <div id="div-b">
                Foo
            </div>
        </div>
    </div>
    <div class="col third">
        <p style="height: 200px">Three</p>
    </div>
</div>

You see that div#div-b is cut off at the top when it overflows in the div.container element.

Answer 1

Unfortunately what you want to do is impossible without bringing the dialogue outside of the container element.

Your best bet is to make the dialog element a sibling of the container and position it that way.

Answer 2

Unfortunately no... I don't think there's a way to circumvent overflow: hidden with absolute position. You may experiment with position: fixed, but you won't be positioning under quite the same conditions if you use it.