title: The elements are not fixed on the window
body: <p>On the header, I need to have </p>
  
  <ul>
  <li>the logo be located the left side of the banner (without space)</li>
  <li>Both banner and logo be always in the middle of the page (regardless of screen size)</li>
  <li>Also have four images that should always be on the top right side of
  the window (regardless of screen size)</li>
  </ul>
  
  <h2><strong><a href="http://jsfiddle.net/jackmoore/b9tbxtLb/10/" rel="nofollow">Demo</a></strong></h2>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
    &lt;link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"&gt;
    &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"&gt;&lt;/script&gt;
    &lt;style&gt;
   .form-control{
    -webkit-border-radius: 5;
       -moz-border-radius: 5;
            border-radius: 5;
  }
  
  #logo{
          float:right;
  }
  
  @media screen and (min-width: 480px) {
      #logo{
          float:left;
      }
  }
  
  @media screen and (min-width: 768px) {
      #logo{
          float:left;
      }
  }
  
  
  
  .searchinput{
    height: 40px;
    border:#000 1px solid;
    box-shadow: none;
    margin-bottom:10px;
  }
  
  .btn-search{
    background: #777;
    width:95%;
    height: 40px;
    border: 1px solid #777;
    border-radius: 4px;
    padding:8px 50px;
    display: inline-block;
    text-align: center;
    color: #fff;
    font-weight: 100;
    letter-spacing: 0.05em;
    box-shadow: inset 0 -3px 0 rgba(0,0,0,.1);
  }
  
  .btn-search:hover{
    color: #fff;
    text-decoration: none;
    border-color: #3c3c3c;
    background: #3c3c3c;
    box-shadow: none;
  }
  
  .btn-search:a{
    padding-top: 50px;
  }
    &lt;/style&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  
  
  &lt;div class="container-fluid"&gt;
  &lt;div class="row" &gt;
  &lt;div class="col-md-9 col-sm-9 col-xs-2"&gt;
  &lt;div id="banner"&gt;
  &lt;div id="logo" style="margin-right:0px;"&gt;
  &lt;img height="40px" width="40px" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR_FCNfsR_UhKGdOTtUKK8XfQXKnlgw5Q0jaBbdiCSBTnCoaGgqIA"&gt;
  &lt;/div&gt;
    &lt;img height="40px;" width="300px;" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR-32Ge8DaAq_81IBLPFdRWmKVYgvN9YyDKKjXh6CTTpgey8qbC"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  
  &lt;/div&gt;
  
  &lt;/div&gt;
  &lt;div class="col-md-3"&gt;
  &lt;div id="images" style="float:right;"&gt;
  &lt;img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR_FCNfsR_UhKGdOTtUKK8XfQXKnlgw5Q0jaBbdiCSBTnCoaGgqIA" width="20px" height="20px"/&gt;
  &lt;img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR_FCNfsR_UhKGdOTtUKK8XfQXKnlgw5Q0jaBbdiCSBTnCoaGgqIA" width="20px" height="20px"/&gt;
  &lt;img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR_FCNfsR_UhKGdOTtUKK8XfQXKnlgw5Q0jaBbdiCSBTnCoaGgqIA" width="20px" height="20px"/&gt;
  &lt;img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR_FCNfsR_UhKGdOTtUKK8XfQXKnlgw5Q0jaBbdiCSBTnCoaGgqIA" width="20px" height="20px"/&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <h2>Update</h2>
  
  <p>So far, I could put the images on the top right of the window.</p>
  
  <pre><code>&lt;div class="container-fluid"&gt;
  &lt;div class="row"&gt;
  &lt;div class="col-md-9 col-sm-9 col-xs-2"&gt;
  &lt;div id="banner"&gt;
  &lt;div id="logo" style="margin-right:0px;"&gt;
  &lt;img height="40px" width="40px" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR_FCNfsR_UhKGdOTtUKK8XfQXKnlgw5Q0jaBbdiCSBTnCoaGgqIA"&gt;
  &lt;/div&gt;
    &lt;img height="40px;" width="300px;" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR-32Ge8DaAq_81IBLPFdRWmKVYgvN9YyDKKjXh6CTTpgey8qbC"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="col-md-2 col-sm-3 col-xs-10"&gt;
  &lt;div id="images" style="float:right; position: absolute;
      right: 0;
      top: 5px;
      z-index: 9999;"&gt;
  &lt;img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR_FCNfsR_UhKGdOTtUKK8XfQXKnlgw5Q0jaBbdiCSBTnCoaGgqIA" width="20px" height="20px"/&gt;
  &lt;img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR_FCNfsR_UhKGdOTtUKK8XfQXKnlgw5Q0jaBbdiCSBTnCoaGgqIA" width="20px" height="20px"/&gt;
  &lt;img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR_FCNfsR_UhKGdOTtUKK8XfQXKnlgw5Q0jaBbdiCSBTnCoaGgqIA" width="20px" height="20px"/&gt;
  &lt;img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR_FCNfsR_UhKGdOTtUKK8XfQXKnlgw5Q0jaBbdiCSBTnCoaGgqIA" width="20px" height="20px"/&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>