title: Form fixed to bottom while content also is fluid
body: <p>I need the bottom half (form) to be fixed to the bottom while the portion above it be fluid. (Chat area)</p>
  
  <p>I managed to get the form fixed to the bottom but the chat area portion is going behind it when I need it to stop where the form begins.</p>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.page{
   min-height: 100%
  }
  #chatBox{
   overflow:scroll;
   position: absolute;
  }
  .formTextareaWrap{
   padding-left:10px;
   padding-right:10px;
  }
  #formArea{
   clear: both;
   margin-top: -160px;
   height:160px;
   background-color:#fff;
  }
  </code></pre>
  
  <p><strong>HTML</strong>
      </p>
  
  <pre><code>        &lt;!-- Page Content--&gt;
          &lt;div class="content pageHome page"&gt;
              &lt;div id="chatBox"&gt;
                  &lt;em class="speach-left-title"&gt;John Doe says:&lt;/em&gt;
                  &lt;p class="speach-left"&gt;This is just an awesome bubble! It's quite cute isn't it?&lt;/p&gt;
  
                  &lt;div class="clear"&gt;&lt;/div&gt;
  
                  &lt;em class="speach-right-title"&gt;Jane Doe replied:&lt;/em&gt;
                  &lt;p class="speach-right blue-bubble"&gt;Yeap! It's awesome isn't it and it's not that hard to use! And they act like bubbles, only expanding to 75% of width!&lt;/p&gt;
  
                  &lt;div class="clear"&gt;&lt;/div&gt;
  
                  &lt;em class="speach-left-title"&gt;John Doe says:&lt;/em&gt;
                  &lt;p class="speach-left"&gt;Awesome stuff!&lt;/p&gt;
  
                  &lt;div class="clear"&gt;&lt;/div&gt;
  
                  &lt;em class="speach-right-title"&gt;Jane Doe replied:&lt;/em&gt;
                  &lt;p class="speach-right blue-bubble"&gt;Yeap! It's awesome isn't it and it's not that hard to use! And they act like bubbles, only expanding to 75% of width!&lt;/p&gt;
  
  
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div id="formArea"&gt;
              &lt;form action="php/contact.php" method="post" class="contactForm" id="contactForm"&gt;
                  &lt;fieldset&gt;
  
                      &lt;div class="formTextareaWrap"&gt;
                          &lt;label class="field-title contactMessageTextarea" for="contactMessageTextarea"&gt;Message: &lt;span&gt;(required)&lt;/span&gt;&lt;/label&gt;
                          &lt;textarea name="contactMessageTextarea" class="contactTextarea requiredField" id="contactMessageTextarea"&gt;&lt;/textarea&gt;
                      &lt;/div&gt;
                      &lt;div class="formSubmitButtonErrorsWrap" style="padding-left:10px;padding-right:10px;"&gt;
                          &lt;input type="submit" class="buttonWrap button button-green contactSubmitButton" id="contactSubmitButton" value="SUBMIT" data-formId="contactForm"/&gt;
                      &lt;/div&gt;
                  &lt;/fieldset&gt;
              &lt;/form&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>