title: HTML CSS - Layout breaks on zooming
body: <p>I have some problem with my layout. It looks good on my computer when I zoom to 100%. But when I zoom in or out the layout breaks. I tried several ways to wrap the layout but it didn't work so far. Since I need the layout to be responsive, any help is appreciated.</p>
  
  <p>html:</p>
  
  <pre><code>&lt;body&gt;
  &lt;div class="low_wrapper"&gt;
  &lt;div id="intro" class="category"&gt;
  &lt;p&gt;&lt;span class="category_description"&gt;&lt;h1&gt;Intro&lt;/h1&gt;&lt;/span&gt;&lt;/p&gt;
  &lt;div class="low_info_header" &gt;head&lt;/div&gt;
  &lt;div class="low_info_element_big"&gt;&lt;/div&gt;
  &lt;div class="low_info_element_big"&gt;&lt;/div&gt;
  &lt;div class="low_info_header" &gt;head&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div id="women" class="category"&gt;
  &lt;h1&gt;Women&lt;/h1&gt;
  &lt;div class="low_info_header" &gt;head&lt;/div&gt;
  &lt;div class="low_info_element_big"&gt;&lt;/div&gt;
  &lt;div class="low_info_element_big"&gt;&lt;/div&gt;
  &lt;div class="low_info_header" &gt;head&lt;/div&gt;
  &lt;/div&gt;
  
  
  &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>css:</p>
  
  <pre><code>body{
  margin: 0 0 0 0 ;
  }
  
  .category h1{
  float:left;
  width:940px;
  font-family:'Open Sans';
  }
  .low_wrapper{
  position:absolute;
  margin-left:30px;
  margin-top:30px;
  position:absolute;
  }
  
  #low_info{
  margin: 0 0 0px 33px;
  width:940px;
  background-color: #ccc;
  float:left;
  }
  
  .low_info_header{
  width:940px;
  height:120px;
  background-color:#FF0A83;
  float:left;
  position:relative;
  }
  
  
  .low_info_element_big{
  height:400px;
  width:460px;
  background-color:#FF0A83;
  margin-top:10px;
  margin-right:20px;
  margin-bottom:10px;
  float:left;
  position:relative;
  
  }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/MsUTp/1/" rel="nofollow">http://jsfiddle.net/MsUTp/1/</a></p>