title: expandable/contractable columns with 100% width
body: <p>Trying to make 5 divs ( acting as columns 100% height, 20% width ) contractible and expandable with jquery on mouse hover. I got this part working to a degree but last column is bugging and creating strange white gap before going back to original position. see attached fiddle as its hard to explain. I want to get this working without last column freaking out on me.</p>
  
  <pre><code>&lt;body&gt;
  &lt;div class="columnContainer"&gt;
      &lt;section class="mainColumn columnOne" class=""&gt;
  
      &lt;/section&gt;
      &lt;section class="mainColumn columnTwo" class=""&gt;
  
      &lt;/section&gt;
      &lt;section class="mainColumn columnThree" class=""&gt;
  
      &lt;/section&gt;
      &lt;section class="mainColumn columnFour" class=""&gt;
  
      &lt;/section&gt;
      &lt;section class="mainColumn columnFive" class=""&gt;
  
      &lt;/section&gt;
  &lt;/div&gt;
  
  
  &lt;script src="http://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"&gt;&lt;/script&gt;
  &lt;script src="js/jq-ui.js" type="text/javascript" charset="utf-8"&gt;&lt;/script&gt;
  &lt;script src="js/playgroundjs.js" type="text/javascript" charset="utf-8"&gt;&lt;/script&gt;
  </code></pre>
  
  <p></p>
  
  <pre><code>.columnContainer{
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
  white-space: nowrap;
  display: block;
  left: 0;
  top: 0;
  </code></pre>
  
  <p>}</p>
  
  <pre><code>$(".mainColumn").click(function(){
  if ( $(this).hasClass("large") ){
       $(this).animate({width:"20%"},300), $(".mainColumn").animate({width:"20%"});
       $(this).removeClass("large");
  }
  else {
       $(this).animate({width:"40%"},300);
       $(this).removeClass("mainColumn"), $(".mainColumn").animate({width:"15%"},300);
       $(this).addClass("mainColumn");
       $(this).addClass("large");
  }
  </code></pre>
  
  <p>});</p>
  
  <p><a href="http://jsfiddle.net/LxmRx/" rel="nofollow">http://jsfiddle.net/LxmRx/</a></p>