title: Zoom in/out how do I keep the aspect ratio?
body: <p>Working Example: <a href="http://jsfiddle.net/4jmY2/4/" rel="nofollow">http://jsfiddle.net/4jmY2/4/</a></p>
  
  <p>If you Zoom in/out (ctrl +/-) you will see the elements move around, how can I keep the aspect ratio so the content will remain the same no matter what size?</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="check_box"&gt;        
      &lt;div class="check"&gt;
          &lt;div class="your_name"&gt;Your Name&lt;/div&gt;
          &lt;div class="bank_name"&gt;Your Bank Name&lt;/div&gt;
          &lt;div class="check_number_top"&gt;1001&lt;/div&gt;
          &lt;div class="your_address"&gt;Your Address&lt;/div&gt;
          &lt;div class="bank_address"&gt;Bank Address&lt;/div&gt;
          &lt;br /&gt;
          &lt;div class="date"&gt;Date ________&lt;/div&gt;
          &lt;br /&gt;
          &lt;div class="pay"&gt;Pay to the&lt;br /&gt;Order of _______________________________ $________&lt;/div&gt;
          &lt;br /&gt;
          &lt;div class="pay_line"&gt;_________________________________________ Dollars&lt;/div&gt;
          &lt;br /&gt;
          &lt;div class="sign"&gt;_____________________&lt;/div&gt;
          &lt;br /&gt;
          &lt;div class="check_number_bottom"&gt;&amp;#9288;&lt;strong&gt;1001&lt;/strong&gt;&amp;#9288;&lt;/div&gt;
          &lt;div class="routing_number"&gt;&amp;#9286;&lt;strong&gt;123456789&lt;/strong&gt;&amp;#9286;&lt;/div&gt;
          &lt;div class="account_number"&gt;&lt;strong&gt;987&amp;nbsp;6543210&lt;/strong&gt;&amp;nbsp;&amp;#9288;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.check_box {
      width: 300px;
  }
  .check {
      border: 2px solid #1A1B1B;
      background-color: #DFE5E5;
      height: 110px;
      font-size:80%;
      font-family: Georgia;    
      padding:0px;
      margin: 0px;    
  }
  .your_name {
      float:left;
      padding:0px 30px 0px 5px;
      font-size:105%;
  }
  .your_address {
      float:left;
      padding:0px 40px 0px 5px;
      font-size:85%;
  }
  .bank_name {
      float:left;
      padding:0px 30px 0px 5px;
      font-size:105%;
  }
  .bank_address {
      float:left;
      padding:0px 30px 0px 5px;
      font-size:85%;
  }
  .check_number_top {
      float:left;
      padding:0px 0px 0px 40px;
      font-size:105%;
  }    
  .date {
      float:left;
      padding:0px 0px 0px 220px;
      font-size:85%;
  }
  .pay {
      float:left;
      padding:0px 0px 0px 5px;
      font-size:85%;
  }
  .pay_line {
      float:left;
      padding:0px 0px 0px 5px;
      font-size:85%;
  }
  .sign {
      float:left;
      padding:0px 0px 0px 165px;
      font-size:85%;
  }
  .check_number_bottom {
      float:left;
      padding:0px 0px 0px 5px;
      font-size:85%;
      font-family:"Arial Narrow"; /* need to change the font's of the numbers */
  }
  .routing_number {
      float:left;
      padding:0px 0px 0px 5px;
      font-size:85%;
      font-family:"Arial Narrow"; /* need to change the font's of the numbers */
  }    
  .account_number {
      float:left;
      padding:0px 0px 0px 10px;
      font-size:85%;
      font-family:"Arial Narrow"; /* need to change the font's of the numbers */
  }
  .routing_number_tip {
      float:left;
      padding:0px 0px 0px 10px;
      font-size:85%;
      color:#1F4CA5;
  }
  .account_number_tip {
      float:left;
      padding:0px 0px 0px 10px;
      font-size:85%;
      color:#1F4CA5;
  }
  </code></pre>