title: Expand a Div Vertically to fit contents
body: <p>I have <strong>Login</strong> page, with a <strong>div</strong> in the center. I have set the height and it fits perfectly. However, if I add <strong>validation errors</strong> at the top of the <strong>div</strong>, the <strong>button</strong> at the bottom gets pushed outside the <strong>div</strong>. The page is a bit more complicated, but I have simplified it to the following HTML and CSS</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;link rel="stylesheet" href="test.css"&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id="content"&gt;
          &lt;form action="/Account/LogIn" method="post"&gt;
              &lt;div id="login" name="login"&gt;
                  &lt;div id="validation-errors"&gt;
                      &lt;ul&gt;
                          &lt;li&gt;
                              One or more errors here
                          &lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/div&gt;
                  &lt;label&gt;Email:&lt;/label&gt; &lt;input type="email" name="email"&gt; &lt;br/&gt;
                  &lt;label&gt;Password:&lt;/label&gt; &lt;input type="password" name="password"&gt; &lt;br/&gt;
                  &lt;input id="loginBtn" type="submit" value="Login" /&gt;
              &lt;/div&gt;
          &lt;/form&gt;
      &lt;/div&gt;
  &lt;/body&gt;
   &lt;/html&gt;
  </code></pre>
  
  <p>And <strong>CSS</strong>:</p>
  
  <pre><code>#content {
       position: absolute;
       top: 50%;
       left: 0px;
       width: 100%;
       height: 0px;
       overflow: visible;
       visibility: visible;
       display: block;
   }
   #login {
       background-color:#85ADFF;
       width: 350px;
       height: 100px;
       position: absolute;
       top:-100px;
       bottom:0;
       left:0;
       right:0;
       margin:auto;
   }
   #loginBtn {
       float: right;
  }
  </code></pre>
  
  <p>You can view it at <a href="http://jsfiddle.net/9jA2F/" rel="nofollow">http://jsfiddle.net/9jA2F/</a></p>
  
  <p>What changes should I make so that the <strong>Login</strong> button stays in the Blue box <strong>div</strong> even when <strong>validation errors</strong> are displayed. If you delete the <strong>validation error div</strong>, it seems to work fine i.e. the button is within the Blue box <strong>div</strong>.</p>