title: images colliding together when resizing browser window
body: <p>My problem is when I resize my browser my images collide together rather then staying in their own designated formation. Realistically when I resize my browser I would like my images to move with the browser but not collide with each other. Here is the code, thanks in advanced.</p>
  
  <p>Here is my HTML...</p>
  
  <pre><code>&lt;div id="header-images"&gt;
  
      &lt;img src="images/title.png" id="header_title" class="animated bounceInLeft" alt="Title Header"&gt;&lt;/img&gt;
  
      &lt;img src="images/header_interface.png" id="interface" class="animated bounceInRight" alt="Poyan's Interface"&gt;&lt;/img&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is my CSS...</p>
  
  <pre><code>    #header_title {     
      width: 561px;   
      height: 248px;
      margin-top: 175px;
      left: 37.5%;
      margin-left: -280.5px;
      position: absolute;
      z-index: -1000;
      min-width: 100px;
  }
  
      #interface {
      min-width: 100px;
      width: 338px;
      height: 315px;
      margin-top: 165px;
      left: 73%;
      margin-left: -169px;
      position: absolute;
      z-index: -1000;
  } 
  </code></pre>
  
  <p>Let me know if you need more.</p>