title: javascript setting width dimensions changes element location
body: <p>I'm trying to adjust the width of a <code>div</code> that is centred using JavaScript when a menu button is clicked, but when I do the width changes ok but it sets the element about 20px downwards too. This created a large empty gap above <code>contentSectionLeftSide</code>.</p>
  
  <p>Here's what I've got:</p>
  
  <pre><code> function setButtonH(e){
  
      var item = e;
      var items = ["menu_item1","menu_item2","menu_item3","menu_item4"];
  
      if(e==items[1])
      {
          document.getElementById("contentSectionLeftSide").style.width="600px";
          document.getElementById("contentSectionRightSide").style.width="300px";
          document.getElementById("contentSectionLeftSide").style.height="500px";
          document.getElementById("contentSectionRightSide").style.height="500px";
      }
      else {
          document.getElementById("contentSectionLeftSide").style.width="45%";
          document.getElementById("contentSectionRightSide").style.width="45%";
          document.getElementById("contentSectionLeftSide").style.height="500px";
          document.getElementById("contentSectionRightSide").style.height="500px";
       }
    }
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code> &lt;nav id="menu_item"&gt;
  
  
          &lt;div id="menu_item1" onclick="setButtonH('menu_item1'), menuGo(1)"&gt;
  
                  Home
  
          &lt;/div&gt;
  
  
          &lt;div id="menu_item2" onclick="setButtonH('menu_item2'), menuGo(2)"&gt;
  
                  Interests
  
          &lt;/div&gt;
  
          &lt;div id="menu_item3" onclick="setButtonH('menu_item3'), menuGo(3)"&gt;
  
                  Creations
  
          &lt;/div&gt;
  
  
          &lt;div id="menu_item4" onclick="setButtonH('menu_item4'), menuGo(4)"&gt;
  
                  Bio
  
          &lt;/div&gt;
  
      &lt;/nav&gt;
  
  
  
   #contentSectionLeftSide{
  
      padding:10px;
  margin-bottom:4px;
  background:#EFEFEF;
  -webkit-border-radius:5px;  
  display:inline-block;
   }
   #contentSectionRightSide{
  padding:10px;
  margin-bottom:4px;
  background:#EFEFEF;
  -webkit-border-radius:5px;  
  display:inline-block;
  }
  </code></pre>