title: What's wrong with my CSS , elements move and overlap when resizing window to smaller size?
body: <p>Ok , so below is my CSS AND HTML code. I have been using percentage for the divs so that those divs can re-adjust to bigger screen sizes . The annoying thing is that when I resize the window to a smaller size on my computer , those elements keep moving till they overlap and I don't want that . How can I use percentages to make those divs re-adjust to bigger resolutions , yet not move when resizing the window to a smaller size based on the CSS and HTML I have below </p>
  
  <p>Here is the CSS </p>
  
  <pre><code>body{
      background:#F4F4F4;
      background-size:100%;
      width:100%;
      height:100%;
      margin:0 auto;
              min-width:1300px;
              min-height:750px;
  }
  .logo{
      position:absolute;
      left:40%;
      top:5%;
  }
      .logo_homepage{
      position:absolute;
      left:4%;
      top:5%;
  }
     .homepage_slogan{
      position:absolute;
      left:3%;
      top:45%;
  }
      .search_box{
      position:absolute;
      left:30%;
      top:30%;
              width:35%;
              height:50%;
              min-width:35%;
              min-height:50%;
  
  }
  
  
      .user_info{
      position:absolute;
      left:75%;
              height:100%;
              width:20%;
              min-width:20%;
              background:white;
  }
  .header{
      position:absolute;
      top:0px;
      width:100%;
              min-width:98%;
      height:100px;
              min-height:100px;
      left:0;
      background:#EB6A4A; 
  }
  
  .slogan{
      position:absolute;
      top:60%;
      left:40.5%;
  }
  
  .login{
      position:absolute;
      top:15%;
      left:90%;
  }
  
      .whitebackground{
      background:#FFFFFF;
  }
  
  #slides{
      position:absolute;
      top:20%;
      width:50%;
      background:transparent;
      height:20%;
      left:25%;
  }
  .socialfeeds{
      position:absolute;
      top:41%;
      width:25%;
      height:52%;
              min-width:25%;
              min-height:52%;
      left:25%;
  } 
      .heading{
      position:absolute;
      top:20%;
      width:100%;
              min-width:100%;
      height:10%;
              min-height:10%;
      left:2%;
  }
  
      .bucket{
      position:absolute;
      top:18%;
      left:20%;
              width:13%;
              min-width:13%;
  }
  
       .title{
      position:absolute;
      top:20%;
      left:32%;
              width:30%;
              min-width:30%;
  }
  
      .feed_icons{
        margin:20px;
  
  }
  
  .featured{
      position:absolute;
      top:30%;
      width:30%;
              min-width:30%;
      background:transparent;
      height:60%;
              min-height:60%;
      left:60%;
  }
  </code></pre>
  
  <p>and the HTML</p>
  
  <pre><code>&lt;body class="whitebackground"&gt;
      &lt;div class="header"&gt;
          &lt;div class="logo"&gt;&lt;img draggable="false" src="/images/logo.png" /&gt;&lt;/div&gt;
          &lt;div class="slogan"&gt;&lt;img draggable="false" src="/images/slogan.png" /&gt;&lt;/div&gt;
          &lt;div class="login"&gt;&lt;a href="/twitter/redirect.php"&gt;&lt;img draggable="false" src="/images/login.png" /&gt;&lt;/a&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="bucket"&gt;
          &lt;span class="feed_icons"&gt;&lt;a href="#"&gt;&lt;img draggable="false" src="/images/bucket.png"/&gt;&lt;/a&gt;&lt;/span&gt;
      &lt;/div&gt;
          &lt;div class="title"&gt;
          &lt;span class="feed_icons"&gt;&lt;a href="#"&gt;&lt;img draggable="false" src="/images/title.png"/&gt;&lt;/a&gt;&lt;/span&gt;
      &lt;/div&gt;
      &lt;div class="socialfeeds"&gt;
          &lt;span class="feed_icons"&gt;&lt;a href="#"&gt;&lt;img draggable="false" src="/images/social_feeds.png" width="100%" height="100%"/&gt;&lt;/a&gt;&lt;/span&gt;
      &lt;/div&gt;
      &lt;div class="featured"&gt;&lt;img draggable="false" src="/images/featured_list.png" width="100%" height="100%" /&gt; &lt;/div&gt;
      &lt;div class="footer"&gt; &lt;span style='margin-left:45%;'&gt; COPYRIGHT 2013&amp;copy;&lt;/span&gt;&lt;/div&gt;
  
  
  &lt;/body&gt;
  </code></pre>