title: three div in a single row
body: <p>I want to align the three div in a single row for that i have given the left and center div to float:left property and right div to float right property</p>
  
  <p>but my right div is displayed on the left side of the screen</p>
  
  <p>my code is as follows</p>
  
  <pre><code>&lt;div style="width:100%; height:100%;"&gt;
  &lt;div align="center" id="left_portion" style="display:none; position:absolute; float:left; width:10%; height:10%;"&gt;&lt;/div&gt;
  &lt;div id="scroller" align="center" style="width:100%; height:100%; overflow:hidden; position:absolute; float:left;"&gt;
      &lt;img src="" id="img_main" style="width:100%; height:100%; overflow:hidden;" onClick="scaleImage(event)"&gt;
  &lt;/div&gt;
  &lt;div id="right_portion" align="center" style="display:none; float:right; position:absolute;  width:10%; height:10%;"&gt;&lt;/div&gt;
  &lt;/div&gt;   
  </code></pre>
  
  <p>i want to use the left and right div as a masking div i.e. when i click on center div second div is going to scale and i want to show the particular portion of the div and rest portion is going to mask from left and right div</p>