title: HTML-BROWSER ZOOM CAUSES ALIGNMENT PROBLEMS
body: <p>I have 2 div elements with float left and float right withiin a div element..when i zoom the browser,all the  alignment changes..the zooming should be like...how we zoom an image....can anyone give suggestions to resolve this problem</p>
  
  <pre><code>&lt;html&gt;
  &lt;style type="text/css"&gt;
  div.advancedDrugSearchOuterLayout
  {
  border-style: groove;
  border-color: #005ce5;
  margin-left:10%;
  margin-right:10%;
  margin-top:1%;
  height: 430px;
  zoom: 200%;
  }
  div.searchByBlock{
  border-style: ridge;
  border-color: #000;
  float: left;
  height: 70%;
  width: 46%;
  margin-left: 2%;
  margin-top:1%;
  margin-bottom:1%;
  }
  div.narrowByBlock{
  border-style: ridge;
  border-color: #000;
  float: right;
  height: 70%;
  width: 46%;
  margin-right: 2%;
  margin-top:1%;
  margin-bottom:1%;
  }
  div.searchByText{
  margin-left: 2%;
  float:left;
  text-align:left;
  width:46%;
  }
  div.narrowByText{
  margin-right: 1.5%;
  float:right;
  text-align:left;
  width:46%;
  }
  div.compareAndClearFields{
  margin-left: 2%;
  float:left;
  text-align:center;
  width:46%;
  }
  div.errorMessageDisplayforAdvanceDrugSearch{
  margin-left: 2%;
  float:right;
  text-align:center;
  width:46%;
  }
  div.advancedDrugSearchText{
  margin-left: 2%;
  }
  div.textBelowAdvancedDrugSearchText{
  margin-left: 2%;
  }
  div.browseClassesLink{
  float:right;
  }
  input.search{
  background-color: #007fea;
  height:30px;
  width:40%;
  font: bold;
  font-color: white;
  margin-left: 3%;
  }
  table.blocksForSearchByAndNarrowBy{
  margin-bottom:3%;
  }
  &lt;/style&gt;
  &lt;body&gt;
  
  &lt;div class="claro"&gt;
  
  &lt;div class="advancedDrugSearchOuterLayout"&gt;
      &lt;div class="advancedDrugSearchText"&gt;
          &lt;font size="4" color= "mediumorchid"&gt;&lt;b&gt;THIS iS AN EXAMPLE&lt;/b&gt;&lt;/font&gt;
       &lt;/div&gt;
       &lt;div class="textBelowAdvancedDrugSearchText"&gt;
           &lt;font size="3" &gt;&lt;i&gt;THESE ARE DATABASE TEXT&lt;/a&gt;
        &lt;/div&gt;
  
      &lt;div&gt;
         &lt;div class="searchByText"&gt; 
              &lt;font size="2"&gt;&lt;u&gt;&lt;b&gt;searchBy&lt;/b&gt;&lt;i&gt;SearchTermIsrequired&lt;/i&gt;&lt;/u&gt;&lt;/font&gt;
         &lt;/div&gt;
         &lt;div class="narrowByText"&gt;
              &lt;font size="2"&gt;&lt;u&gt;&lt;b&gt;narrow&lt;/b&gt;&lt;i&gt;(optional)&lt;/i&gt;&lt;/u&gt;&lt;/font&gt;
         &lt;/div&gt;
      &lt;/div&gt;   
  
  
      &lt;div class="searchByBlock"&gt;
  
      &lt;table border="1""&gt;
          &lt;tr&gt;&lt;td style="width:100px"&gt;&lt;/td&gt;
              &lt;td&gt;&lt;div style="float:right"&gt;&lt;a href="#"&gt;Browse list of classes&lt;/div&gt;
          &lt;/td&gt;&lt;/tr&gt;
          &lt;/table&gt;    
  &lt;div&gt;       
          &lt;div style="float:left"&gt;
              &lt;font size="3"&gt;drugClass&lt;/font&gt;
          &lt;/div&gt;
          &lt;div style="float:right"&gt;   
              &lt;input  id="selectDrugClasses"&gt;
           &lt;/div&gt; 
  &lt;/div&gt; 
          &lt;div&gt;       
              &lt;table&gt;     
                  &lt;tr&gt;
                      &lt;td height="110"&gt;&lt;/td&gt;
                      &lt;td height="110"&gt;&lt;/td&gt;
                   &lt;/tr&gt;      
              &lt;/table&gt;
          &lt;/div&gt;  
          &lt;div&gt;       
               &lt;div style="float:left"&gt;
                       &lt;font size="3"&gt;CLASS&lt;/font&gt;
                    &lt;/div&gt;                    
                    &lt;div style="float:right"&gt;
                             &lt;input id="selectIndications"&gt;
                      &lt;/div&gt;      
          &lt;/div&gt;
      &lt;/div&gt;     
  
      &lt;div class="narrowByBlock"&gt;
      &lt;table&gt;&lt;tr&gt;&lt;td style="width:10px"&gt;&lt;/td&gt;
          &lt;td&gt; &lt;div style="float:right"&gt;&lt;input type="radio" checked="true"&gt;include
              &lt;input type="radio"&gt;exclude
           &lt;/div&gt; 
  &lt;/td&gt;
  &lt;/tr&gt;
  &lt;/table&gt;         
  
          &lt;div style="float:left"&gt;
                                 &lt;font size="3"&gt;CLINICAL&lt;/font&gt;
          &lt;/div&gt;
          &lt;div style="float:right"&gt;   
                                &lt;input id="selectAdverseEffects"&gt;                              
          &lt;/div&gt;  
          &lt;div&gt;
          &lt;table&gt; 
              &lt;tr&gt;
                  &lt;td height="90"&gt;&lt;/td&gt;
                  &lt;td height="90"&gt;&lt;/td&gt;
              &lt;/tr&gt;
          &lt;/table&gt;
      &lt;/div&gt;
      &lt;table border="1"&gt;&lt;tr&gt;&lt;td style="width:10px"&gt;&lt;/td&gt;
      &lt;td&gt;&lt;div  style="float:right"&gt;      
  
              &lt;input type="radio"  checked="true"&gt;include
              &lt;input type="radio"&gt;exclude
  
      &lt;/div&gt;&lt;/td&gt;&lt;/tr&gt;
      &lt;/table&gt;
  
      &lt;div&gt;
          &lt;div style="float:left"&gt;
                               &lt;font size="3"&gt;Suggestion&lt;/font&gt;
          &lt;/div&gt;
              &lt;div style="float:right"&gt;
                                   &lt;input id="selectDrugInteractions"&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;/div&gt;
      &lt;div&gt;
         &lt;div class="compareAndClearFields"&gt;
                  &lt;input class="search" type="submit" value="Search &amp; Compare Drugs" name="submit" id="formSubmit" onClick="submitForm()"&gt; 
                  &lt;a onClick="resetForm()"&gt;clearAllFields&lt;/a&gt;
         &lt;/div&gt;
  
      &lt;/div&gt;  
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>