How to prevent divs from moving around when resizing?
<p>I'm trying to design a single page website but whenever I resize the page my contact form moves upward. </p>

<p>I'm trying to have it stay fixed against a background image. How do I make the div stay put?</p>

<p>My Html:</p>

<p>
                </p>

<pre><code>            &lt;head&gt;

                &lt;meta charset="utf-8"&gt;
                &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
                &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
                &lt;meta name="description" content=""&gt;
                &lt;meta name="author" content=""&gt;

                &lt;title&gt;Title&lt;/title&gt;

                &lt;!-- Bootstrap Core CSS --&gt;
                &lt;link href="css/bootstrap.min.css" rel="stylesheet"&gt;
                &lt;link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"&gt; 

                &lt;!-- Custom CSS --&gt;
                &lt;link href="css/full-slider.css" rel="stylesheet"&gt;
                &lt;link href="css/full-slider.css" rel="stylesheet"&gt;
                &lt;link rel="stylesheet" type="text/css" href="css/demo.css"&gt;
                &lt;link rel="stylesheet" href="css/footer-distributed-with-address-and-phones.css"&gt;
                &lt;link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css"&gt;

                &lt;link href="http://fonts.googleapis.com/css?family=Cookie" rel="stylesheet" type="text/css"&gt;
                &lt;script src="http://code.angularjs.org/1.2.6/angular.js"&gt;&lt;/script&gt; 
                &lt;script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"&gt;&lt;/script&gt;
                &lt;!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --&gt;
                &lt;!-- WARNING: Respond.js doesn't work if you view the page via file:// --&gt;
                &lt;!--[if lt IE 9]&gt;
                    &lt;script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"&gt;&lt;/script&gt;
                    &lt;script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"&gt;&lt;/script&gt;
                &lt;![endif]--&gt;

            &lt;/head&gt;



                &lt;!-- Navigation --&gt;
                &lt;nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"&gt;
                    &lt;div class="container"&gt;
                        &lt;!-- Brand and toggle get grouped for better mobile display --&gt;
                        &lt;div class="navbar-header"&gt;
                            &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"&gt;
                                &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
                                &lt;span class="icon-bar"&gt;&lt;/span&gt;
                                &lt;span class="icon-bar"&gt;&lt;/span&gt;
                                &lt;span class="icon-bar"&gt;&lt;/span&gt;
                            &lt;/button&gt;
                            &lt;a class="navbar-brand" href="#"&gt;Logo&lt;/a&gt;
                        &lt;/div&gt;
                        &lt;!-- Collect the nav links, forms, and other content for toggling --&gt;
                        &lt;div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"&gt;
                            &lt;ul class="nav navbar-nav"&gt;
                                &lt;li&gt;
                                    &lt;a href="#About"&gt;About&lt;/a&gt;
                                &lt;/li&gt;
                                &lt;li&gt;
                                    &lt;a href="#Services"&gt;What we do&lt;/a&gt;
                                &lt;/li&gt;
                                &lt;li&gt;
                                    &lt;a href="#Contact"&gt;Portfolio&lt;/a&gt;
                                &lt;/li&gt;
                                &lt;li&gt;
                                    &lt;a href="#Form"&gt;Contact&lt;/a&gt;
                                &lt;/li&gt;

                            &lt;/ul&gt;
                        &lt;/div&gt;
                        &lt;!-- /.navbar-collapse --&gt;
                    &lt;/div&gt;
                    &lt;!-- /.container --&gt;
                &lt;/nav&gt;

                &lt;!-- Full Page Image Background Carousel Header --&gt;
                &lt;header id="myCarousel" class="carousel slide"&gt;
                    &lt;!-- Indicators --&gt;
                    &lt;ol class="carousel-indicators"&gt;
                        &lt;li data-target="#myCarousel" data-slide-to="0" class="active"&gt;&lt;/li&gt;
                        &lt;li data-target="#myCarousel" data-slide-to="1"&gt;&lt;/li&gt;
                        &lt;li data-target="#myCarousel" data-slide-to="2"&gt;&lt;/li&gt;
                    &lt;/ol&gt;

                    &lt;!-- Wrapper for Slides --&gt;
                    &lt;div class="carousel-inner"&gt;
                        &lt;div class="item active"&gt;
                            &lt;!-- Set the first background image using inline CSS below. --&gt;
                            &lt;div class="fill" style="background-image:url('http://placehold.it/1900x1080&amp;text=Slide One');"&gt;&lt;/div&gt;
                            &lt;div class="carousel-caption"&gt;
                                &lt;h2&gt;1&lt;/h2&gt;
                            &lt;/div&gt;
                        &lt;/div&gt;
                        &lt;div class="item"&gt;
                            &lt;!-- Set the second background image using inline CSS below. --&gt;
                            &lt;div class="fill" style="background-image:url('http://placehold.it/1900x1080&amp;text=Slide Two');"&gt;&lt;/div&gt;
                            &lt;div class="carousel-caption"&gt;
                                &lt;h2&gt;2&lt;/h2&gt;
                            &lt;/div&gt;
                        &lt;/div&gt;
                        &lt;div class="item"&gt;
                            &lt;!-- Set the third background image using inline CSS below. --&gt;
                            &lt;div class="fill" style="background-image:url('http://placehold.it/1900x1080&amp;text=Slide Three');"&gt;&lt;/div&gt;
                            &lt;div class="carousel-caption"&gt;
                                &lt;h2&gt;3&lt;/h2&gt;
                            &lt;/div&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;

                    &lt;!-- Controls --&gt;
                    &lt;a class="left carousel-control" href="#myCarousel" data-slide="prev"&gt;
                        &lt;span class="icon-prev"&gt;&lt;/span&gt;
                    &lt;/a&gt;
                    &lt;a class="right carousel-control" href="#myCarousel" data-slide="next"&gt;
                        &lt;span class="icon-next"&gt;&lt;/span&gt;
                    &lt;/a&gt;

                &lt;/header&gt;

                        &lt;body&gt;
             &lt;!-- Page Content --&gt;
                &lt;div class="container"&gt;

                    &lt;hr class="featurette-divider"&gt;

                    &lt;!-- First Featurette --&gt;
                    &lt;div class="featurette" id="About"&gt;
                        &lt;img class="featurette-image img-circle img-responsive pull-right" src="http://placehold.it/500x500"&gt;
                        &lt;h2 class="featurette-heading"&gt;Bla Bla Bla
                            &lt;span class="text-muted"&gt;More Bla Bla Bla&lt;/span&gt;
                        &lt;/h2&gt;
                        &lt;p class="lead"&gt;Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.&lt;/p&gt;
                    &lt;/div&gt;

                    &lt;hr class="featurette-divider"&gt;

                    &lt;!-- Second Featurette --&gt;
                    &lt;div class="featurette" id="Services"&gt;
                        &lt;img class="featurette-image img-circle img-responsive pull-left" src="http://placehold.it/500x500"&gt;
                        &lt;h2 class="featurette-heading"&gt;More text goes here
                            &lt;span class="text-muted"&gt;There will be additional things written.&lt;/span&gt;
                        &lt;/h2&gt;
                        &lt;p class="lead"&gt;Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.&lt;/p&gt;
                    &lt;/div&gt;

                    &lt;hr class="featurette-divider"&gt;

                    &lt;!-- Third Featurette --&gt;
                    &lt;div class="featurette" id="Contact"&gt;
                        &lt;img class="featurette-image img-circle img-responsive pull-right" src="http://placehold.it/500x500"&gt;
                        &lt;h2 class="featurette-heading"&gt;Final Part
                            &lt;span class="text-muted"&gt;Will Seal the Deal.&lt;/span&gt;
                        &lt;/h2&gt;
                        &lt;p class="lead"&gt;Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.&lt;/p&gt;
                    &lt;/div&gt;

                    &lt;hr class="featurette-divider"&gt;

                    &lt;!-- Contact --&gt;



                &lt;p class="intro"&gt;
            This is where the contact form will go&lt;/p&gt; 
            &lt;/div&gt;
            &lt;br&gt;



            &lt;form ng-app="myApp" ng-controller="validateCtrl"
            name="myForm" novalidate&gt;

            &lt;div id="wrap"&gt;
                &lt;img class="image" src="http://thekitemap.com/images/feedback-img.jpg"&gt;
              &lt;div id="form-div"&gt;
                &lt;form class="form" id="form1"&gt;
            &lt;p&gt;&lt;br&gt;
            &lt;input type="text" name="user" ng-model="user" ng-minlength="3" ng-maxlength="9" required placeholder="Name"&gt;
            &lt;span style="color:red" ng-show="myForm.user.$dirty &amp;&amp; myForm.user.$invalid"&gt;
            &lt;span ng-show="myForm.user.$error.required"&gt;A name is required.&lt;/span&gt;
            &lt;span ng-show="myForm.user.$error.minlength"&gt;Name is too short.&lt;/span&gt;
            &lt;span ng-show="myForm.user.$error.maxlength"&gt; Name is too long.&lt;/span&gt;
            &lt;/span&gt;
            &lt;/p&gt;


            &lt;p&gt;&lt;br&gt;
            &lt;input type="email" name="email" ng-model="email" required placeholder="Email"&gt;
            &lt;span style="color:red" ng-show="myForm.email.$dirty &amp;&amp; myForm.email.$invalid"&gt;
            &lt;span ng-show="myForm.email.$error.required"&gt;Email address is required.&lt;/span&gt;
            &lt;span ng-show="myForm.email.$error.email"&gt;Invalid email address.&lt;/span&gt;
            &lt;/span&gt;
            &lt;/p&gt;

            &lt;p class="inputfield"&gt;&lt;label for="message"&gt;&lt;br&gt;&lt;/label&gt;&lt;/p&gt; 
                &lt;textarea name="message" id="message" tabindex="2" placeholder="Your Message"&gt;&lt;/textarea&gt;

            &lt;p&gt;
            &lt;div class="submit"&gt;
                &lt;input type="submit" value="SEND" id="button-blue"
            ng-disabled="myForm.user.$dirty &amp;&amp; myForm.user.$invalid ||
            myForm.email.$dirty &amp;&amp; myForm.email.$invalid"/&gt;
                    &lt;div class="ease"&gt;&lt;/div&gt;
                &lt;/div&gt;
            &lt;/p&gt;

            &lt;/form&gt;
            &lt;/div&gt;

            &lt;script&gt;
            var app = angular.module('myApp', []);
            app.controller('validateCtrl', function($scope) {
                $scope.user = '';
                $scope.email = '';
            });
            &lt;/script&gt;

            &lt;/div&gt;
            &lt;/body&gt;

            &lt;br&gt;

            &lt;!--Footer--&gt;
            &lt;footer class="footer-distributed"&gt;

                        &lt;div class="footer-left"&gt;

                            &lt;h3&gt;Company&lt;span&gt;logo&lt;/span&gt;&lt;/h3&gt;

                            &lt;p class="footer-links"&gt;
                                &lt;a href="#"&gt;Home&lt;/a&gt;
                                ·
                                &lt;a href="#"&gt;About&lt;/a&gt;
                                ·
                                &lt;a href="#"&gt;What we do&lt;/a&gt;
                                ·
                                &lt;a href="#"&gt;Portfolio&lt;/a&gt;
                                ·
                                &lt;a href="#"&gt;Contact&lt;/a&gt;

                            &lt;/p&gt;

                            &lt;p class="footer-company-name"&gt;Firm &amp;copy; 2015&lt;/p&gt;
                        &lt;/div&gt;

                        &lt;div class="footer-center"&gt;

                            &lt;div&gt;
                                &lt;i class="fa fa-map-marker"&gt;&lt;/i&gt;
                                &lt;p&gt;&lt;span&gt;1 Main Street&lt;/span&gt; City, Country&lt;/p&gt;
                            &lt;/div&gt;

                            &lt;div&gt;
                                &lt;i class="fa fa-phone"&gt;&lt;/i&gt;
                                &lt;p&gt;+5 555 123456&lt;/p&gt;
                            &lt;/div&gt;

                            &lt;div&gt;
                                &lt;i class="fa fa-envelope"&gt;&lt;/i&gt;
                                &lt;p&gt;&lt;a href="mailto:support@company.com"&gt;email@company.com&lt;/a&gt;&lt;/p&gt;
                            &lt;/div&gt;

                        &lt;/div&gt;

                        &lt;div class="footer-right"&gt;

                            &lt;p class="footer-company-about"&gt;
                                &lt;span&gt;About Us&lt;/span&gt;
                                Lorem ipsum dolor sit amet, consectateur adispicing elit. Fusce euismod convallis velit, eu auctor lacus vehicula sit amet.
                            &lt;/p&gt;

                            &lt;div class="footer-icons"&gt;

                                &lt;a href="#"&gt;&lt;i class="fa fa-facebook"&gt;&lt;/i&gt;&lt;/a&gt;
                                &lt;a href="#"&gt;&lt;i class="fa fa-twitter"&gt;&lt;/i&gt;&lt;/a&gt;
                                &lt;a href="#"&gt;&lt;i class="fa fa-linkedin"&gt;&lt;/i&gt;&lt;/a&gt;

                            &lt;/div&gt;

                        &lt;/div&gt;

                    &lt;/footer&gt;

                &lt;!-- /.container --&gt;

                &lt;!-- jQuery --&gt;
                &lt;script src="js/jquery.js"&gt;&lt;/script&gt;

                &lt;!-- Bootstrap Core JavaScript --&gt;
                &lt;script src="js/bootstrap.min.js"&gt;&lt;/script&gt;



                &lt;!-- /.container --&gt;

                &lt;!-- jQuery --&gt;
                &lt;script src="js/jquery.js"&gt;&lt;/script&gt;

                &lt;!-- Bootstrap Core JavaScript --&gt;
                &lt;script src="js/bootstrap.min.js"&gt;&lt;/script&gt;

                &lt;!-- Script to Activate the Carousel --&gt;
                &lt;script&gt;
                $('.carousel').carousel({
                    interval: 5000 //changes the speed
                })
                &lt;/script&gt;

             &lt;/html&gt;
</code></pre>

<p>MY CSS: 
@import url('<a href="http://fonts.googleapis.com/css?family=Open+Sans:400,700" rel="nofollow">http://fonts.googleapis.com/css?family=Open+Sans:400,700</a>');</p>

<pre><code>            *{
                padding:0;
                margin:0;
            }

            html{
                background-color: #eaf0f2;
            }

            body{
                font:14px/1.5 Arial, Helvetica, sans-serif;
                min-width: 750px;
            }

            header{
                text-align: center;
                padding-top: 100px;
                margin-bottom:200px;
            }

            header h1{
                font: normal 32px/1.5 'Open Sans', sans-serif;
                color: #3F71AE;
                padding-bottom: 16px;
            }

            header h2{
                color: #F05283;
            }

            header h2 a{
                color:inherit;
                text-decoration: none;
                display: inline-block;
                border: 1px solid #F05283;
                padding: 10px 15px;
                border-radius: 3px;
                font: bold 14px/1 'Open Sans', sans-serif;
                text-transform: uppercase;
            }

            header h2 a:hover{
                background-color:#F05283;
                transition: 0.2s;
                color:#fff;
            }

            header ul {
                max-width: 600px;
                margin: 60px auto 0;
            }

            header ul a{
                text-decoration: none;
                color: #FFF;
                text-align: left;
                background-color: #B9C1CA;
                padding: 10px 16px;
                border-radius: 2px;
                opacity: 0.8;
                font-size: 16px;
                display: inline-block;
                margin: 4px;
                line-height: 1;
                outline: none;

                transition: 0.2s ease;
            }

            header ul li a.active{
                background-color: #66B650;
                pointer-events: none;
            }

            header ul li a:hover {
                opacity: 1;
            }

            header ul{
                list-style: none;
                padding: 0;
            }

            header ul li{
                display: inline-block;
            }
            .container{
                margin-left:auto;
                margin-right:auto;
                width:960px;
            }

            .validation-message {
                color: #f00;
            }

            #feedback-page{
                text-align:center;
            }
            .image {
                width:100%;
                height:100%;

            }
            #wrap {
                width: 100%;
                float:left;
                padding-top:0px;

            }

            #form-div {
                background-color:rgba(72,72,72,0.4);
                padding-left:35px;
                padding-right:35px;
                padding-top:35px;
                padding-bottom:50px;
                width: 450px;
                float: left;
                left: 50%;
                position: absolute;
                margin-top:-730px;
                margin-left: -260px;
              -moz-border-radius: 7px;
              -webkit-border-radius: 7px;
            }

            .feedback-input {
                color:#3c3c3c;
                font-family: Helvetica, Arial, sans-serif;
                font-weight:500;
                font-size: 18px;
                border-radius: 0;
                line-height: 22px;
                background-color: #fbfbfb;
                padding: 13px 13px 13px 54px;
                margin-bottom: 10px;
                width:100%;
                -webkit-box-sizing: border-box;
                -moz-box-sizing: border-box;
                -ms-box-sizing: border-box;
                box-sizing: border-box;
              border: 3px solid rgba(0,0,0,0);
            }

            .feedback-input:focus{
                background: #fff;
                box-shadow: 0;
                border: 3px solid #3498db;
                color: #3498db;
                outline: none;
              padding: 13px 13px 13px 54px;
            }

            .focused{
                color:#30aed6;
                border:#30aed6 solid 3px;
            }
            input[type="text"] {
                display: inline;
                width: 100%;
                height: 30px;
                font-size: 16px;
                background-color:white;
                font-family: 'Lato';

            }
            input[type="email"] {
                display: inline;
                width: 100%;
                height: 30px;
                font-size: 16px;
                background-color: white;
                font-family: 'Lato';

            }
            /* Icons ---------------------------------- */

            textarea {
                width: 100%;
                height: 150px;
                line-height: 150%;
                resize:vertical;
            }

            input:hover, textarea:hover,
            input:focus, textarea:focus {
                background-color:white;
            }

            #button-blue{
                font-family: 'Montserrat', Arial, Helvetica, sans-serif;
                float:left;
                width: 100%;
                border: #fbfbfb solid 4px;
                cursor:pointer;
                background-color: #3498db;
                color:white;
                font-size:24px;
                padding-top:22px;
                padding-bottom:22px;
                -webkit-transition: all 0.3s;
                -moz-transition: all 0.3s;
                transition: all 0.3s;
                margin-top:-4px;
                font-weight:700;
            }

            #button-blue:hover{
                background-color: rgba(0,0,0,0);
                color: #0493bd;
            }

            .submit:hover {
                color: #3498db;
            }

            .ease {
                width: 0px;
                height: 74px;
                background-color: #fbfbfb;
                -webkit-transition: .3s ease;
                -moz-transition: .3s ease;
                -o-transition: .3s ease;
                -ms-transition: .3s ease;
                transition: .3s ease;
            }

            .submit:hover .ease{
              width: 100%;
              background-color:white;
            }

            @media only screen and (max-width: 580px) {
                #form-div{
                    left: 3%;
                    margin-right: 3%;
                    width: 88%;
                    margin-left: 0;
                    padding-left: 3%;
                    padding-right: 3%;
                }
            }


            footer{
                position: fixed;
                bottom: 0px;
            }

            @media (max-height:800px){
                footer { position: static; }
                header { padding-top:40px; }
            }
</code></pre>

<p><a href="https://jsfiddle.net/5rc1c7dL/" rel="nofollow">https://jsfiddle.net/5rc1c7dL/</a></p>