title: How to keep divs from overlapping on resize
body: <p>I'm making a homepage and it works great in my resolution, but if I try to resize the window, the different logos (divs) start to overlap each other.</p>
  
  <p>This is how it's supposed to look: </p>
  
  <p><img src="https://i.stack.imgur.com/tQun6.jpg" alt="http://imgur.com/5qC2Vs7"></p>
  
  <p>But whenever I resize the window, the logos (divs/pictures) overlap.</p>
  
  <p>I have a lot of code that is what I believe to be irrelevant to the problem, but just in case, this is the complete code at jsfiddle (the pictures/font doesn't work though): <a href="http://jsfiddle.net/sXy3u/" rel="nofollow noreferrer">http://jsfiddle.net/sXy3u/</a></p>
  
  <p>Otherwise, this is an example of code of each div that I believe you'll need to help:</p>
  
  <pre><code>&lt;div id="youtube"&gt;
      &lt;a href="http://www.youtube.com/"&gt;&lt;img src="youtube.png"/&gt;&lt;/a&gt;
      &lt;a href="http://www.youtube.com/"&gt;
          &lt;div id="youtubeHover"&gt;
          &lt;div id="youtubeCircle"&gt;
              &lt;div id="youtubeArrow"&gt;
                  &amp;nbsp;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;/div&gt; 
      &lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>That's an example of one of the tiles. Now for two of the css codes:</p>
  
  <pre><code>#youtube {
      width: 195px;
      height: 195px;
      margin-top: 5px;
      padding-top: 5px;
      position: relative;
      overflow: hidden;
  }
  </code></pre>
  
  <p>And the one that's overlapping:</p>
  
  <pre><code>#yahoo {
      margin-top: -810px;
      margin-left: 600px;
      width: 195px;
      height: 195px;
      position: relative;
      overflow: hidden;
  }
  </code></pre>