title: web element position problem
body: <p>Make each of the two element take half of the width of their parent.</p>
  
  <p>Here is my example:</p>
  
  <p><a href="http://jsfiddle.net/zUqqN/" rel="nofollow noreferrer">http://jsfiddle.net/zUqqN/</a></p>
  
  <p>I just want the div#mapContent_coverage do not show by default,and then the div#mapContent_emap will take all the width of the "mapDiv",</p>
  
  <p>when user click the img in the right,the <strong>div#mapContent_coverage</strong> should show,and then "<strong>mapContent_emap" and "mapContent_coverage"</strong> will show at the same time,and I want both of them take half of the width.</p>
  
  <p>I have tried use the  float and absolute to the div,but it does not work,any idea?</p>
  
  <p>BTW,I do not want the scrollbar show in the browser,for exmaple:</p>
  
  <p>Now matter how do I resize the browser ,there is not scroll bar . How to make this?</p>
  
  <p><img src="https://i.stack.imgur.com/d7BQa.png" alt="enter image description here"></p>
  
  <h2>UPDATE:</h2>
  
  <p>The default page layout:
  <img src="https://i.stack.imgur.com/d7Uq1.png" alt="enter image description here"></p>
  
  <p>WHen I click the img in the right,the page should change to :
  <img src="https://i.stack.imgur.com/TYVds.png" alt="enter image description here"></p>