Controlling the responsiveness of a web page

Question

I've a requirement where if a page is stretched beyond 992*1024 size, then the page should expand and get adjusted. But when the page size is less than 992*1024 size, then browser should add scrolling as shown in below screen shot:

#maincontent {
  padding: 0px 10% 2% 10%;
}
.infodiv {
  font-weight: bold;
  margin-top: 3%;
}
.ordiv {
  font-weight: bold;
  margin-top: 3%;
  min-width: 400px;
  width: 30%;
}
#formdata {
  background-color: #166bb3;
  height: 470px;
  min-width: 410px;
  width: 30%;
}
#username,
#selectCou {
  height: 36px;
  border: 0px;
  background: #e0dede;
  appearance: none;
  -moz-appearance: none;
  /* Firefox */
  -webkit-appearance: none;
  /* Safari and Chrome */
  overflow: hidden;
  border: 1px solid #ccc;
  border-radius: 0px;
}
#selectCou {
  overflow: hidden;
  background: url(../images/downarrowOne.png) no-repeat right #ddd;
  border: 1px solid #ccc;
}
#example1 {
  height: 36px;
  width: 149px;
  background: #e0dede;
  appearance: none;
  -moz-appearance: none;
  /* Firefox */
  -webkit-appearance: none;
  /* Safari and Chrome */
  border-radius: 0px;
}
#selectGen {
  height: 36px;
  width: 149px;
  background: #e0dede;
  overflow: hidden;
  background: url(../images/downarrowOne.png) no-repeat right #ddd;
  border: 1px solid #ccc;
  border-radius: 0px;
}
.alignPos {
  width: 18%;
}
.imgPos {
  padding-top: 3%;
}
.styled-select select {
  appearance: none;
  -moz-appearance: none;
  /* Firefox */
  -webkit-appearance: none;
  /* Safari and Chrome */
}
.custombtn {
  width: -moz-available;
  height: 36px;
  background: #e0dede;
  border-radius: 0px;
}
#fbbtn {
  background: #ffbf00;
  height: 47px;
  border: 1px solid #FA2;
  border-bottom-left-radius: 0px 0px;
  border-bottom-left-radius: 0px 0px;
  border-bottom-right-radius: 0px 0px;
  border-bottom-right-radius: 0px 0px;
  border-top-left-radius: 0px 0px;
  border-top-left-radius: 0px 0px;
  border-top-right-radius: 0px 0px;
  border-top-right-radius: 0px 0px;
  color: #333;
  display: block;
  font: normal normal bold 18px/normal Arial, sans-serif;
  padding: 8px 0px 5px 10px;
  text-decoration: none;
  text-shadow: #FE6 0px 1px 0px;
  margin-left: 3%;
  margin-top: 6%;
  width: 49.5%;
  min-width: 300px;
}
#gbtn {
  background: #ffbf00;
  height: 47px;
  border: 1px solid #FA2;
  border-bottom-left-radius: 0px 0px;
  border-bottom-left-radius: 0px 0px;
  border-bottom-right-radius: 0px 0px;
  border-bottom-right-radius: 0px 0px;
  border-top-left-radius: 0px 0px;
  border-top-left-radius: 0px 0px;
  border-top-right-radius: 0px 0px;
  border-top-right-radius: 0px 0px;
  color: #333;
  display: block;
  font: normal normal bold 18px/normal Arial, sans-serif;
  padding: 8px 0px 5px 10px;
  text-decoration: none;
  text-shadow: #FE6 0px 1px 0px;
  margin-left: 3%;
  margin-top: 6%;
  width: 49.5%;
  min-width: 300px;
}
.imgcontainer {
  background: #E6E6E6;
}

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.0/css/bootstrap-datepicker.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div id="maincontent" class="container-fluid">
  <div class="row">
    <div class="col-md-6 infodiv">Fill your information here</div>
    <div class="col-md-6 ordiv">Or</div>
  </div>
  <div class="row">
    <div class="col-md-6">
      <form id="formdata" role="form" class="form-horizontal">
        <div class="col-xs-3 imgPos alignPos" style="padding=0;">
          <img src="images/username.png" alt="User name" class="img-responsive" style="margin-left: 6%;">
        </div>
        <div class="col-xs-9 imgPos">
          <div class="form-group">
            <input type="text" class="form-control" placeholder="User name" id="username">
          </div>
        </div>
        <div class="col-xs-3 alignPos" style="padding:0;">
          <img src="images/confirm password.png" alt="User name" class="img-responsive" style="margin-left: 15%;">
        </div>
        <div class="col-xs-9">
          <div class="form-group">
            <input type="password" class="form-control" placeholder="Password" id="username">
          </div>
        </div>
        <div class="col-xs-3 alignPos" style="padding:0;">
          <img src="images/confirm password.png" alt="User name" class="img-responsive" style="margin-left: 15%;">
        </div>
        <div class="col-xs-9">
          <div class="form-group">
            <input type="password" class="form-control" placeholder="Password confirmation" id="username">
          </div>
        </div>
        <div class="col-xs-3 alignPos" style="padding:0;">
          <img src="images/email.png" alt="User name" class="img-responsive" style="margin-left: 15%;">
        </div>
        <div class="col-xs-9">
          <div class="form-group">
            <input type="email" class="form-control" placeholder="Email" id="username">
          </div>
        </div>
        <div class="col-xs-3 alignPos" style="padding:0;">
          <img src="images/country.png" alt="User name" class="img-responsive" style="margin-left: 15%;">
        </div>
        <div class="col-xs-9">
          <div class="form-group">
            <select id="selectCou" class="form-control">
              <option value="" disabled selected>Select your country</option>
              <option>India</option>
              <option>Singapore</option>
              <option>Thailand</option>
            </select>
          </div>
        </div>
        <div class="col-xs-3 alignPos" style="padding:0;">
          <img src="images/city.png" alt="User name" class="img-responsive" style="margin-left: 15%;">
        </div>
        <div class="col-xs-9">
          <div class="form-group">
            <select id="selectCou" class="form-control">
              <option value="" disabled selected>Select your city</option>
              <option>Delhi</option>
              <option>Singapore</option>
              <option>Bangkok</option>
            </select>
          </div>
        </div>
        <div class="col-xs-3 alignPos" style="padding:0;">
          <img src="images/birth.png" alt="User name" class="img-responsive" style="margin-left: 15%;">
        </div>
        <div class="col-xs-9">
          <div class="form-group">
            <input type="text" placeholder="Date of Birth" id="example1" class="form-control">
          </div>
        </div>
        <div class="col-xs-3 alignPos" style="padding:0;">
          <img src="images/city.png" alt="User name" class="img-responsive" style="margin-left: 15%;">
        </div>
        <div class="col-xs-9">
          <div class="form-group styled-select">
            <select id="selectGen" class="form-control">
              <option value="" disabled selected>Select Gender</option>
              <option>Male</option>
              <option>Female</option>
            </select>
          </div>
        </div>
        <div class="col-xs-4" style="margin-left: 59%;">
          <div class="form-group">
            <button type="submit" class="form-control btn btn-default custombtn">Register</button>
          </div>
        </div>
      </form>
    </div>
    <div class="col-md-6">
      <div id="fbbtn">
        <img src="images/fbOne.png" style="padding-right:2%;">Register with Facebook</div>
      <div id="gbtn">
        <img src="images/gPlus.jpg" style="padding-right:2%;width: 14%;">Register with Google</div>
    </div>
  </div>
</div>

When I decrease my page size beyond 992*1024 size, the or div and register with FB and register with Google come down. I don't want that to happen. Browser should simply add scroll when I decrease the size beyond 992*1024 size. How can I do it?
JSFiddle link is here.

Answer 1

You can add a min-width to #maincontent

#maincontent {
    padding: 0px 10% 2% 10%;
    min-width: 1200px;
}

In addition to this the bootstrap column also needs updating. It should be 'col-xs-' instead of 'col-md-'.

Updated code is available at the following link http://output.jsbin.com/yocahahevi

Answer 2

Just set a min-width on the container so that it doesn't shrink below your threshold:

#maincontent {
  min-width: 992px;
}

If you need to get more specific at various viewport sizes, play with media queries.