title: Responsiveness through container width
body: <p>I am using bootstrap for responsive form layout. I am able to achieve responsive layout through bootstrap grid system (col-xs-.., col-md-.., etc..)
  Here's the working example: <a href="http://jsfiddle.net/xf93jnLw/2/" rel="nofollow">http://jsfiddle.net/xf93jnLw/2/</a></p>
  
  <p>The issue is due to media queries, the form layout is getting adjusted through the screen view-port width, which Left nav width + form container width. And I am looking to adjust the responsiveness based on only form-container width. So that if I want to use this form-container in modal window, the form fields and labels should get adjust through the form-container width, and not the whole screen view-port. Is there any pure CSS solution for this?</p>
  
  <p>Appreciate your responses...</p>
  
  <p>HTML code:
      
          Left nav
      
      
        
          
            
                <br><br>
              
                      
                          
                              Long sized label for testing:
                          </p>
  
  <pre><code>                    &lt;div class="col-xs-8 col-sm-8 ers-col-field"&gt;
                          &lt;input type="text" class="form-control"&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  
                  &lt;div class="ers-field col-xs-12 col-sm-6 col-md-6 col-lg-6"&gt;
                      &lt;div class="col-xs-4 col-sm-4 ers-col-label"&gt;
                          &lt;label class="ers-label" title="Medium sized label:"&gt;&lt;div class="content ng-binding"&gt;Medium sized label:&lt;/div&gt;&lt;/label&gt;
                      &lt;/div&gt;
  
                      &lt;div class="col-xs-8 col-sm-8 ers-col-field"&gt;
                          &lt;input type="text" class="form-control"&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  
                  &lt;div class="ers-field col-xs-12 col-sm-6 col-md-6 col-lg-6"&gt;
                      &lt;div class="col-xs-4 col-sm-4 ers-col-label"&gt;
                          &lt;label class="ers-label" title="Short label:"&gt;&lt;div class="content ng-binding"&gt;Short label:&lt;/div&gt;&lt;/label&gt;
                      &lt;/div&gt;
  
                      &lt;div class="col-xs-8 col-sm-8 ers-col-field"&gt;
                          &lt;input type="text" class="form-control"&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  
                  &lt;div class="ers-field col-xs-12 col-sm-6 col-md-6 col-lg-6"&gt;
                      &lt;div class="col-xs-4 col-sm-4 ers-col-label"&gt;
                          &lt;label class="ers-label" title="Long sized label for testing:"&gt;&lt;div class="content ng-binding"&gt;Long sized label for testing:&lt;/div&gt;&lt;/label&gt;
                      &lt;/div&gt;
  
                      &lt;div class="col-xs-8 col-sm-8 ers-col-field"&gt;
                          &lt;input type="text" class="form-control"&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  
                  &lt;div class="ers-field col-xs-12 col-sm-6 col-md-6 col-lg-6"&gt;
                      &lt;div class="col-xs-4 col-sm-4 ers-col-label"&gt;
                          &lt;label class="ers-label" title="Medium sized label:"&gt;&lt;div class="content ng-binding"&gt;Medium sized label:&lt;/div&gt;&lt;/label&gt;
                      &lt;/div&gt;
  
                      &lt;div class="col-xs-8 col-sm-8 ers-col-field"&gt;
                          &lt;input type="text" class="form-control"&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  
                  &lt;div class="ers-field col-xs-12 col-sm-6 col-md-6 col-lg-6"&gt;
                      &lt;div class="col-xs-4 col-sm-4 ers-col-label"&gt;
                          &lt;label class="ers-label" title="Short label:"&gt;&lt;div class="content ng-binding"&gt;Short label:&lt;/div&gt;&lt;/label&gt;
                      &lt;/div&gt;
  
                      &lt;div class="col-xs-8 col-sm-8 ers-col-field"&gt;
                          &lt;input type="text" class="form-control"&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="ers-field col-xs-12 col-sm-6 col-md-6 col-lg-6"&gt;
                      &lt;div class="col-xs-4 col-sm-4 ers-col-label"&gt;
                          &lt;label class="ers-label" title="Long sized label for testing:"&gt;&lt;div class="content ng-binding"&gt;Long sized label for testing:&lt;/div&gt;&lt;/label&gt;
                      &lt;/div&gt;
  
                      &lt;div class="col-xs-8 col-sm-8 ers-col-field"&gt;
                          &lt;input type="text" class="form-control"&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  
                  &lt;div class="ers-field col-xs-12 col-sm-6 col-md-6 col-lg-6"&gt;
                      &lt;div class="col-xs-4 col-sm-4 ers-col-label"&gt;
                          &lt;label class="ers-label" title="Medium sized label:"&gt;&lt;div class="content ng-binding"&gt;Medium sized label:&lt;/div&gt;&lt;/label&gt;
                      &lt;/div&gt;
  
                      &lt;div class="col-xs-8 col-sm-8 ers-col-field"&gt;
                          &lt;input type="text" class="form-control"&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  
                  &lt;div class="ers-field col-xs-12 col-sm-6 col-md-6 col-lg-6"&gt;
                      &lt;div class="col-xs-4 col-sm-4 ers-col-label"&gt;
                          &lt;label class="ers-label" title="Short label:"&gt;&lt;div class="content ng-binding"&gt;Short label:&lt;/div&gt;&lt;/label&gt;
                      &lt;/div&gt;
  
                      &lt;div class="col-xs-8 col-sm-8 ers-col-field"&gt;
                          &lt;input type="text" class="form-control"&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="ers-field col-xs-12 col-sm-6 col-md-6 col-lg-6"&gt;
                      &lt;div class="col-xs-4 col-sm-4 ers-col-label"&gt;
                          &lt;label class="ers-label" title="Long sized label for testing:"&gt;&lt;div class="content ng-binding"&gt;Long sized label for testing:&lt;/div&gt;&lt;/label&gt;
                      &lt;/div&gt;
  
                      &lt;div class="col-xs-8 col-sm-8 ers-col-field"&gt;
                          &lt;input type="text" class="form-control"&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  
                  &lt;div class="ers-field col-xs-12 col-sm-6 col-md-6 col-lg-6"&gt;
                      &lt;div class="col-xs-4 col-sm-4 ers-col-label"&gt;
                          &lt;label class="ers-label" title="Medium sized label:"&gt;&lt;div class="content ng-binding"&gt;Medium sized label:&lt;/div&gt;&lt;/label&gt;
                      &lt;/div&gt;
  
                      &lt;div class="col-xs-8 col-sm-8 ers-col-field"&gt;
                          &lt;input type="text" class="form-control"&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  
                  &lt;div class="ers-field col-xs-12 col-sm-6 col-md-6 col-lg-6"&gt;
                      &lt;div class="col-xs-4 col-sm-4 ers-col-label"&gt;
                          &lt;label class="ers-label" title="Short label:"&gt;&lt;div class="content ng-binding"&gt;Short label:&lt;/div&gt;&lt;/label&gt;
                      &lt;/div&gt;
  
                      &lt;div class="col-xs-8 col-sm-8 ers-col-field"&gt;
                          &lt;input type="text" class="form-control"&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="ers-field col-xs-12 col-sm-6 col-md-6 col-lg-6"&gt;
                      &lt;div class="col-xs-4 col-sm-4 ers-col-label"&gt;
                          &lt;label class="ers-label" title="Long sized label for testing:"&gt;&lt;div class="content ng-binding"&gt;Long sized label for testing:&lt;/div&gt;&lt;/label&gt;
                      &lt;/div&gt;
  
                      &lt;div class="col-xs-8 col-sm-8 ers-col-field"&gt;
                          &lt;input type="text" class="form-control"&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  
                  &lt;div class="ers-field col-xs-12 col-sm-6 col-md-6 col-lg-6"&gt;
                      &lt;div class="col-xs-4 col-sm-4 ers-col-label"&gt;
                          &lt;label class="ers-label" title="Medium sized label:"&gt;&lt;div class="content ng-binding"&gt;Medium sized label:&lt;/div&gt;&lt;/label&gt;
                      &lt;/div&gt;
  
                      &lt;div class="col-xs-8 col-sm-8 ers-col-field"&gt;
                          &lt;input type="text" class="form-control"&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  
                  &lt;div class="ers-field col-xs-12 col-sm-6 col-md-6 col-lg-6"&gt;
                      &lt;div class="col-xs-4 col-sm-4 ers-col-label"&gt;
                          &lt;label class="ers-label" title="Short label:"&gt;&lt;div class="content ng-binding"&gt;Short label:&lt;/div&gt;&lt;/label&gt;
                      &lt;/div&gt;
  
                      &lt;div class="col-xs-8 col-sm-8 ers-col-field"&gt;
                          &lt;input type="text" class="form-control"&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;                    
  
                  &lt;div class="clearfix visible-lg-block"&gt;&lt;/div&gt;
  
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/fieldset&gt;
    &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.left-nav {float:left; background:purple; color:white; height:100%; width:10%;}
  .form-container {float:left;width:85%; background:lightblue}
  .ers-field {
    margin: 0 0 3px 0; }
    .ers-field .ers-label {
      padding: 8px 0 5px 5px;
      font: normal 13px Arial, sans-serif; }
      .ers-field .ers-label .required {
        color: #cc0000; }
      .ers-field .ers-label .content {
        max-width: 93%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        float: left; }
    .ers-field .ers-input {
      padding: 0 15px 0 5px; }
  
  @media (max-width: 1000px) {
    .ers-col-field, .ers-col-label {
      padding: 0 5px; } }
  @media (min-width: 1001px) {
    .ers-col-field, .ers-col-label {
      padding: 0 15px 0 5px; } }
  </code></pre>