title: Keeping all my divs fixed, regardless of browser window size
body: <p>So I am pretty new to web design/development and have been working on a simple website that doesn't do much, just to get the hang of it. I made a webpage look pretty good when my Browser is at max screen but when I shrink the window all my divs and everything shifts around and all of a sudden it looks like a total mess. How would I make this not happen.</p>
  
  <p>Here is the code just in case... It probably looks like a mess to the experienced but here it is anyway:</p>
  
  <p>THE STYLE.CSS FILE</p>
  
  <pre><code>   body{
      background-image:   url(Images/background.gif);
      background-repeat:repeat-x;
      background-size: cover;
      }
      .topBar{
      width: 100%;
      top: 0;
      height: 50px;
      position: fixed;
      right: 0;
      -webkit-box-shadow: 0px 0px 8px 0px #000;
  
      background-image:url(Images/topBar2.gif);
      }
      #logoImage{
      float: left;
      width: 180px;
      height: 50px;
      top: 0;
      margin-left: 380px;
      background-image: url(Images/images/topBar_02.gif);
  
      }
  
      .topBar h1{
      float: left;
      margin-left: 400px;
      color: white;
      top: 0;
      font-family: Tahoma, Geneva, sans-serif;
      text-align:justify;
      text-shadow: -1px -1px 1px #000;
  
      }
      .logoImage {
      top: 0;
      float: left;
      margin-left: 100px;
      }
      #btn{
      cursor:pointer;
      border-radius: 4px;
      border: 1px solid #039;
      font: 16px bold  Tahoma, Geneva, sans-serif;
      color: white;
  
      background-color: #0499ff;
  
      padding 4px;
  
  
      }
      .searchBox {
      float: right;
      margin-top: 7px;
  
      padding-right: 500px;
  
  
      }
      .searchBox input{
      border-radius: 5px;
      padding:4px;
  
      color:#666;
      font:  "Times New Roman", Times, serif;
  
      }
  
      .topBar img{
      width: 40px;
      height:20px;
      margin: 20px;
      margin-left: 400px;
      }
      .mainLogin{
      border: 1px solid  #999;
      border-radius: 6px;
      width: 300px;
      height: 100px;
      margin-top: 300px;
      float: right;
      margin-right: 500px;
      position: fixed;
      background-image:url(Images/login_back2.gif);
      padding: 20px;
  
  
  
      }
     .mainLogin input{
      border-radius: 5px;
      padding: 4px;
  
      }
      .username{
      width: 300px;
  
      }
      #rmbrme{
      float:right;
      color: #999;
      text-shadow:-.3px -.3px .3px #000;
      margin-right: 110px;
      margin-top: 3px;
      font: 10px Georgia, "Times New Roman", Times, serif;
  
      }
      #rmbrme a{
      text-decoration: none;
      color: #999;
      text-shadow: -.3px -.3px .3px #000;
      }
  </code></pre>