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.

Answer 3

One option would be to place the content of your overflow:hidden container into a sub-container (a child div perhaps). Then, make the sub-container match the dimensions of the container and move the overflow:hidden from the container to the sub-container.

Then, you can make the dialog a child of the container (a sibling of the sub-container), and it will now exist in an element that does NOT have overflow:hidden.

I haven't tested this, and removing the overflow:hidden from the container may break your design. If that is the case, I would suggest doing as others have and moving the dialog box outside of the container entirely. This could even be done via Javascript if you don't have the option of putting the dialog box's code anywhere else. (Javascript could make the dialog box a child of BODY, or some other tag, when you need it displayed)