preventing absolute button from overlapping inputs
<p>the form itself will expand as the page is shrunk. I have a button that uses position:absolute;bottom:0; to keep it at the bottom of the page. When the page is shrunk the button overlaps the inputs.
I created a 3rd div to butt up with the button and use margin-bottom:10px; so the 2 should never touch div3 and button_holder. but it still overlaps. How can i prevent the 2 divs from overlapping each other? Even tho the button is absolute the div3 should still expand the form by pushing the whole form down when using display:table;</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>#service_wrap {
    padding: 0;
    margin: 0;
    width: 100%;
    height: 400px;
    max-height: 400px;
    display: table;
    background-color: #000;
    background-image: url('../images/thumbsup.jpg');
    background-size: cover;
    background-repeat: no-repeat;
}
h1 {
    color: #FFF;
    width: 90%;
    text-align: center;
    font-weight: bold;
    font-size: 22px;
    text-transform: uppercase;
    margin-top: 4%;
    margin-bottom: 3%;
    padding-left: 3%;
}
h2 {
    color: #FFF;
    font-size: 17px;
    width: 100%;
    text-align: center;
    margin: 0 auto;
    margin-top: 5%;
    margin-bottom: 5%;
}
h3 {
    color: #000;
    font-size: 15px;
    width: 100%;
    text-decoration: underline;
    text-align: center;
    margin: 0 auto;
    margin-top: 1%;
    margin-bottom: 1%;
}
h4 {
    color: #000;
    font-size: 15px;
    width: 100%;
    text-align: center;
    margin: 0 auto;
    margin-top: 3%;
    margin-bottom: 3%;
}
h5 {
    color: #000;
    font-size: 12px;
    width: 100%;
    text-align: center;
    margin: 0 auto;
    margin-top: 3%;
    margin-bottom: 8%;
}
h6 {
    color: #FFF;
    width: 100%;
    margin-top: 100px;
    font-weight: bold;
    font-size: 16px;
    margin: 0 auto;
    text-align: center;
    text-transform: uppercase;
    margin-top: 10%;
}
#thingstoknow {
    border: 2px solid red;
    border-radius: 3px;
    width: 30%;
    margin: 0 auto;
    text-transform: uppercase;
    font-size: 15px;
    text-align: center;
    line-height: 46px;
    height: 48px;
    display: table;
}
#thingstoknow a {
    color: #FFF;
    width: 100%;
    height: 100%;
    display: block;
    text-decoration: none;
    white-space: nowrap;
    text-align: center;
    padding-right: 20px;
}
@media screen and (max-width: 400px) {} #service_top {
    margin: 0 auto;
    width:60%;
    display:table;
    margin-bottom:8%;
}
#service_bottom {
    height: 49%;
    width: 100%;
    display: table;
    margin-bottom: 8%;
}
/*     estimate form     */
/*form styles*/

#AUTO {
    display: table;
    /*makes div fill content*/
    
    width: 100%;
    margin: 0 auto;
    position: relative;
    border: px solid green;
    /*visual aid to make sure div fills content*/
    
    margin-bottom: 30px;
}
#AUTO fieldset {
    text-align: center;
    min-height: 350px;
    position: relative;
    width: 95%;
    margin: 0 auto;
    background-color: #FFF;
    display: table;
    /*makes div fill content*/
}
#miles {
    display: none;
    /*spammer fills this out and it gets rejected my mail script*/
}
/*Hide all except first fieldset*/

#AUTO fieldset:not(:first-of-type) {
    display: none;
    /*remove to see all feildsets*/
}
#AUTO fieldset {
    display: none
}
#AUTO fieldset:first-child {
    display: block;
}
#AUTO .div1 {
    margin: 0 auto;
    width: 240px;
    height: 65px;
    left: 10px;
    margin-top: 10px;
    margin-bottom: 20px;
    border: px solid blue;
    /*visual aid to make sure div fills content*/
}
#AUTO .div2 {
    margin: 0 auto;
    width: 100%;
    display: table;
}
#AUTO .div3 {
    margin: 0 auto;
    width: 100%;
    display: table;
    border: 1px solid red;
    margin-bottom: 10px;
}
#contact_name {
    text-align: left;
    margin: 10px;
    min-width: 170px;
    width: 25%;
    display: inline-block;
    vertical-align: middle;
    /*visual aid to make sure div fills content*/
}
#contact_phone {
    text-align: left;
    margin: 10px;
    min-width: 170px;
    width: 25%;
    display: inline-block;
    vertical-align: middle;
    white-space: nowrap;
}
#contact_email {
    text-align: left;
    margin: 10px;
    min-width: 170px;
    width: 25%;
    display: inline-block;
    vertical-align: middle;
}
.button_holder {
    width: 98%;
    margin: 0 auto;
    display: table;
    margin-top: 30px;
    margin-bottom: 10px;
    position: absolute;
    bottom: 0px;
}
input,
select,
textarea {
    -ms-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    -webkit-box-sizing: content-box;
}
#contact_slide1 {
    display: table;
    width: 70%;
    margin: 0 auto;
    margin-bottom: 30px;
    margin-top: 30px;
}
#contact_slide2 {
    display: table;
    width: 70%;
    margin: 0 auto;
    margin-bottom: 30px;
    margin-top: 30px;
}
#contact_contact {
    min-width: 170px;
    width: 30%;
    display: table;
    float: right;
    white-space: nowrap;
}
#contact_message {
    width: 70%;
    display: table;
    margin: 0 auto;
    margin-bottom: 20px;
}
#contact_slide3 {
    display: table;
    width: 70%;
    margin: 0 auto;
    margin-bottom: 30px;
    margin-top: 30px;
}
input {
    border: 2px solid black;
    border-radius: 4px;
    width: 95%;
    text-align: center;
    line-height: 46px;
    height: 30px;
}
textarea {
    margin: 0 auto;
    text-align: center;
    clear: both;
    border: 2px solid black;
    border-radius: 1px;
    width: 100%;
    margin: 0 auto;
    text-align: center;
    display: block;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    height: 100px;
    margin: 0 auto;
    text-align: center;
}
select {
    text-transform: uppercase;
    float: left;
    border: 2px solid black;
    border-radius: 1px;
    width: 100%;
    text-align: center;
    line-height: 35px;
    height: 35px;
}
input[type=submit] {
    border: 2px solid #F00;
    border-radius: 5px;
    width: 30%;
    text-align: center;
    float: right;
    line-height: 46px;
    height: 50px;
    background-color: #F00;
    color: #FFF;
    margin-left: 5px;
    margin-right: 5px;
}
input[type=button] {
    text-transform: uppercase;
    border: 2px solid #000;
    border-radius: 5px;
    width: 30%;
    text-align: center;
    float: right;
    line-height: 46px;
    height: 50px;
    background-color: #000;
    color: #FFF;
    margin-left: 5px;
    margin-right: 5px;
}
/*     ADDITIONAL SERVICES     */

#additional_services {
    width: 100%;
    margin: 0 auto;
    height: 350px;
    font-size: 14px;
    display: table;
    background-color: #CCC;
}
/*     map and locations     */

#loc_holder {
    background-color: #f0f0f0;
    width: 100%;
    height: 350px;
    display: table;
    padding-bottom: 20px;
    padding-top: 20px;
}
#loc_buttons {
    width: 100%;
    height: 100px;
    background-color: #0F0;
    display: none;
}
#loc_info {
    border: px solid red;
    background-color: #FFF;
    width: 47%;
    height: 420px;
    float: left;
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
    margin-left: 2%;
    margin-right: 1%;
}
#loc_map {
    background-color: #FFF;
    width: 47%;
    float: left;
    margin-left: 1%;
    margin-right: 2%;
    height: 400px;
    display: table;
}
#mloc {
    width: 96.9%;
    border: px solid blue;
    float: left;
    margin: 0 auto;
    padding-left: 3%;
    padding-bottom: 2%;
    margin-bottom: 2%;
    border-bottom: 2px solid #CCC;
}
#mloc_left {
    width: 55%;
    height: 115px;
    display: table;
    border: px solid green;
    float: left;
    padding-left: 3%;
}
#loc_info_dir {
    padding: 2%;
    width: 30%;
    height: 110px;
    display: table;
    float: left;
}
#loc_info_dir #loc_info_maplink {
    width: 80%;
    margin: 0 auto;
    margin-top: 3%;
    margin-bottom: 10%;
    text-align: center;
    font-size: 13px;
}
#loc_info_dir #loc_info_maplink a {
    text-decoration: none;
}
#loc_info_dir #loc_info_dist {
    border: 1px solid purple;
    width: 80%;
    margin: 0 auto;
    margin-top: 10%;
    margin-bottom: 3%;
    text-align: center;
    display: none;
    /* delete when sql code is done*/
}
.maptitle {
    width: 99%;
    border: px solid red;
    font-weight: bold;
    text-transform: uppercase;
}
.manager {
    width: 99%;
    border: px solid red;
    margin-bottom: 3px;
    margin-top: 3px;
}
.manager span {
    font-weight: bold;
}
.addy1 {
    text-transform: uppercase;
    width: 99%;
    border: px solid red;
    margin-bottom: 3px;
}
.addy2 {
    text-transform: uppercase;
    width: 99%;
    border: px solid red;
}
.phone1 {
    width: 99%;
    border: px solid red;
    font-size: 12px;
    font-weight: 600;
}
.fax1 {
    width: 99%;
    border: px solid red;
    font-size: 12px;
    font-weight: 600;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;form id="AUTO"   method="post" action=""&gt;
   &lt;!-- fieldsets --&gt;
   &lt;fieldset&gt;
      &lt;div class="div3"&gt;
         &lt;div class="div1"&gt;&lt;img src="images/step1.png" width="233" height="65"&gt;&lt;/div&gt;
         &lt;h3&gt;CONTACT INFO&lt;/h3&gt;
         &lt;input type="hidden" name="token" value="&lt;?php echo $token; ?&gt;"/&gt;
         &lt;input type="hidden" name="miles" value=""/&gt;
         &lt;div id="contact_name"&gt;FULL NAME: *&lt;br&gt;
            &lt;input id="element_2_1" name="name" class="element text" size="15" maxlength="15" value="" type="text" placeholder="FULL NAME"&gt;
         &lt;/div&gt;
         &lt;div id="contact_phone"&gt;PHONE NUMBER: *&lt;br&gt;
            &lt;input id="element_1" name="phone" class="element text medium" type="text" maxlength="255" value="" placeholder="PHONE NUMBER"/&gt;
         &lt;/div&gt;
         &lt;div id="contact_email"&gt;EMAIL:&lt;br&gt;
            &lt;input id="element_1" name="email" class="element text medium" type="text" maxlength="255" value="" placeholder="EMAIL ADDRESS"/&gt;
         &lt;/div&gt;
      &lt;/div&gt;
      &lt;!--div3--&gt;
      &lt;div class="button_holder"&gt;
         &lt;input type="button" name="next" class="next action-button" value="Next"/&gt;
      &lt;/div&gt;
   &lt;/fieldset&gt;
   &lt;fieldset&gt;
      &lt;div class="div3"&gt;
         &lt;div class="div1"&gt;&lt;img src="images/step2.png" width="233" height="65"&gt;&lt;/div&gt;
         &lt;h3&gt;VEHICLE INFO&lt;/h3&gt;
         &lt;div id="contact_name"&gt;VEHICLE MAKE: *&lt;br&gt;
            &lt;input id="element_2_1" name="make" class="element text" size="15" maxlength="15" value="" type="text" placeholder="FULL NAME"&gt;
         &lt;/div&gt;
         &lt;div id="contact_phone"&gt;VEHICLE MODEL: *&lt;br&gt;
            &lt;input id="element_1" name="model" class="element text medium" type="text" maxlength="255" value="" placeholder="PHONE NUMBER"/&gt;
         &lt;/div&gt;
         &lt;div id="contact_email"&gt;YEAR*:&lt;br&gt;
            &lt;input id="element_1" name="year" class="element text medium" type="text" maxlength="255" value="" placeholder="EMAIL ADDRESS"/&gt;
         &lt;/div&gt;
         &lt;div id="contact_name"&gt;VIN NUMBER: &lt;br&gt;
            &lt;input id="element_2_1" name="vin" class="element text" size="15" maxlength="15" value="" type="text" placeholder="FULL NAME"&gt;
         &lt;/div&gt;
         &lt;div id="contact_phone"&gt;INSURANCE COMPANY ( if applicable ):&lt;br&gt;
            &lt;input id="element_1" name="insurance_company" class="element text medium" type="text" maxlength="255" value="" placeholder="PHONE NUMBER"/&gt;
         &lt;/div&gt;
      &lt;/div&gt;
      &lt;!--div3--&gt;
      &lt;div class="button_holder"&gt;
         &lt;input type="button" name="next" class="next action-button" value="Next"/&gt;
         &lt;input type="button" name="previous" class="previous action-button" value="Previous"/&gt;
      &lt;/div&gt;
   &lt;/fieldset&gt;
   &lt;fieldset&gt;
      &lt;div class="div3"&gt;
         &lt;div class="div1"&gt;&lt;img src="images/step3.png" width="233" height="65"&gt;&lt;/div&gt;
         &lt;div id="contact_message"&gt;MESSAGE:&lt;br&gt;
            &lt;textarea id="element_3" name="message" class="element textarea medium" placeholder="START TYPING MESAGE HERE..."&gt;&lt;/textarea&gt;
         &lt;/div&gt;
      &lt;/div&gt;
      &lt;!--div3--&gt;
      &lt;div class="button_holder"&gt;
         &lt;input type="button" name="next" class="next action-button" value="ALMOST DONE"/&gt;
         &lt;input type="button" name="previous" class="previous action-button" value="Previous" /&gt;
      &lt;/div&gt;
   &lt;/fieldset&gt;
   &lt;fieldset&gt;
      &lt;div class="div3"&gt;
         &lt;div class="div1"&gt;&lt;img src="images/step4.png" width="233" height="65"&gt;&lt;/div&gt;
         &lt;h4&gt;THANK YOU!&lt;/h4&gt;
         &lt;h5&gt;Once you hit Submit a representative will be with you shortly. &lt;/h5&gt;
      &lt;/div&gt;
      &lt;!--div3--&gt;
      &lt;div class="button_holder"&gt;
         &lt;input type="submit" name="submit" class="submit action-button" value="SUBMIT" /&gt;
         &lt;input type="button" name="previous" class="previous action-button" value="Previous"  /&gt;
      &lt;/div&gt;
   &lt;/fieldset&gt;
&lt;/form&gt;</code></pre>
</div>
</div>
</p>