How do I compensate for the overflow property?

Question

stemming from this question

This first image is with no overflow. The top is before I press the button, and the bottom is after.

---

And this image is with overflow:auto. The top is before I press the button, and the bottom is after.

---

What I'm looking for is the panel to look like it does in the first image before I press the button, and what it looks like in the 2nd image when I do press the button.

Here's a copy of the relevant code:

<asp:Panel ID="pnlCustomer" runat="server" style="background-color:#ccccff; width:500px; height:90%; position:relative;" BorderColor="DarkBlue" BorderWidth="2px">

...

<style>
        div.textboxArea {
            text-align:center;
            float:left;
            width:40%;
            margin-top:35px;
        }
        .textboxArea  TextBox {
            width:80%;
        }
        .centerMeVertically  div {
            position:absolute;
            top:50%;
            vertical-align:middle;
            height:30px;
            width:100%;
            margin-top:0px;
            text-align:center;
        }
        div.centerMeVertically {
            float:left;
            width:20%;
            text-align:center;
            height:60px;
            position:relative;
        }
        p {
             margin:-35px 0 0 0;
        }
        .container {
            margin-top:10px;
            margin-bottom:10px;
            overflow:auto;
        }
    </style>

    <div class="container">
        <div style="width:100%;">
            <div class="textboxArea">
                <p><asp:Label runat="server" ID="lblInfoDesc" /></p>
                <asp:TextBox ID="txtInfoDescription" runat="server" TextMode="MultiLine" Rows="3" MaxLength="500" />
            </div>

            <div class="centerMeVertically">
               <div><asp:Button ID="btnNextInfo" runat="server" Text="Next" /></div>
            </div>

            <div class="textboxArea">
                <p><asp:Label runat="server" ID="lblInfoData" /></p>
                <asp:TextBox ID="txtInfoData" runat="server" TextMode="MultiLine" Rows="3" MaxLength="500" />
            </div>
        </div>
    </div>

Answer 1

How are you 'hiding' textboxArea? Right now, textboxArea is fully contained within container, so overflow: auto should contain it. My guess is you are hiding textboxarea via visibility: hidden, which will make it not appear, but it'll still take up space.

Instead use display: none, or, often preferred, position it off the screen via absolute positioning until you need it.

Answer 2

I don't see why you need overflow, or positioning, at all. Just have one outer div (with the blue background/border) and two inner divs, the second one of which starts with display: none then changes to display: block when the button is pressed.

A better was to vertically align things is with the vertical-align: middle rule, and each element set to display: inline-block - which even works in IE6!