title: HTML: How to position button at bottom of page before and after page expand
body: <p>I am trying to place submit button at the bottom of page which has expandable tables. </p>
  
  <p>If I use <code>position: absolute</code> then I can get it at the bottom when the table is not expanded but when I expand the table, the table data goes below the submit button as it won't move with table expansion (due to use of absolute).</p>
  
  <p>If I use <code>position: relative</code> then the submit button will not be at the bottom of page when the table is not expanded (due to use of relative).</p>
  
  <p>Is there a way I can have the submit button at the bottom of page in both above cases? I have tried placing <code>&lt;input type="submit" value="Submit" id="button1" /&gt;</code> inside each divs I have and ouside the divs as well. I need those two divs that divide the screen in two vertical sections.</p>
  
  <p>The jsfiddle demo is at <a href="https://jsfiddle.net/fiddle300/a3btbagv/14/" rel="nofollow">submit button at bottom</a>
  Also the sample code is as below:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;CommDesk Dashboard&lt;/title&gt;
  &lt;meta HTTP-EQUIV="Content-Type" content="text/html; charset=iso-8859-1"&gt;
  &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  $(document).ready(function(){
          $(".btn1").click(function(){
              $(".expand1").toggle();
          });
          $(".btn2").click(function(){
              $(".expand2").toggle();
          });
      })
  &lt;/script&gt;
  &lt;style&gt;
      .expand1 { display: none;
      }
      .expand2 { display: none;
      }
  
      body {
          background-color: AliceBlue;
      }
      span.note1 {float:left}
      span.note2 {font-size:80%}
  
      table#t02, #t02 th, #t02 td {
          border: none;
          border-collapse: collapse;
          font-size:80%;  
      }
      #button1{
          position: absolute;
          bottom:10px;
          left:50%;
      }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;form method="post"&gt;
  &lt;div style="float:left; width:50%; background-color: red"&gt;
  
  &lt;table id="t02" class="table2"&gt;
  &lt;tr&gt;
      &lt;th&gt;&lt;/th&gt;
      &lt;th&gt;&lt;/th&gt;       
      &lt;th style="color:green"&gt;Green&lt;/th&gt;
      &lt;th style="color:gold", colspan="3"&gt;Yellow&lt;/th&gt;
      &lt;th&gt;&lt;/th&gt;
      &lt;th style="color:red"&gt;Red&lt;/th&gt;    
  &lt;/tr&gt;
  &lt;tr&gt;
      &lt;td class="btn1"&gt;Post-IVR Call Volume&lt;/td&gt;
      &lt;td&gt;&amp;lt&lt;/td&gt;        
      &lt;td&gt;&lt;input type="text", name="post_ivr_call_volume_good_high", size="2", maxlength="3"&gt;&lt;/td&gt;
      &lt;td&gt;&lt;input type="text", name="post_ivr_call_volume_warning_low", size="2", maxlength="3"&gt;&lt;/td&gt;
      &lt;td&gt;to&lt;/td&gt;
      &lt;td&gt;&lt;input type="text", name="post_ivr_call_volume_warning_high", size="2", maxlength="3"&gt;&lt;/td&gt;
      &lt;td&gt;&amp;gt&lt;/td&gt;
      &lt;td&gt;&lt;input type="text", name="post_ivr_call_volume_critical_low", size="2", maxlength="3"&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
      &lt;td align="center" class="expand1" colspan="8"&gt;States&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
      &lt;td class="btn2"&gt;IVR Call Volume&lt;/td&gt;
      &lt;td&gt;&amp;lt&lt;/td&gt;        
      &lt;td&gt;&lt;input type="text", name="ivr_call_volume_good_high", size="2", maxlength="3"&gt;&lt;/td&gt;
      &lt;td&gt;&lt;input type="text", name="ivr_call_volume_warning_low", size="2", maxlength="3"&gt;&lt;/td&gt;
      &lt;td&gt;to&lt;/td&gt;
      &lt;td&gt;&lt;input type="text", name="ivr_call_volume_warning_high", size="2", maxlength="3"&gt;&lt;/td&gt;
      &lt;td&gt;&amp;gt&lt;/td&gt;
      &lt;td&gt;&lt;input type="text", name="ivr_call_volume_critical_low", size="2", maxlength="3"&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
      &lt;td align="center" class="expand2" colspan="8"&gt;States&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;
  &lt;/tr&gt;
  &lt;/table&gt;
  &lt;/div&gt;
      &lt;input type="submit" value="Submit" id="button1" /&gt;
      &lt;div style="float:left; width:50%; background-color: yellow"&gt;Place Holder&lt;/div&gt;    
  &lt;/form&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>