title: Horizontal Slide/Toggle of divs.. layout issue..Help needed
body: <p>I'm trying to accomplish the following:
  I have a main Div(A) in the center of my page and 1 div (menus) on either side of Div(A) that would toggle on the click of a button. I'm using jQuery to horizontally slide the side divs/menus. This is the jQuery code (credit to <a href="http://www.learningjquery.com/2009/02/slide-elements-in-different-directions" rel="nofollow">Karl Swedberg</a>):</p>
  
  <pre><code>$(document).ready(function() {
    $('#trigger1').click(function() {
      var $marginLefty = $("#B");
      $marginLefty.animate({
          marginLeft: parseInt($marginLefty.css('marginLeft'), 10) == 0 ? -$marginLefty.outerWidth() : 0
      }, 1500, 'swing');
    });
  
    $('#trigger2').click(function() {
      var $marginLefty = $("#C");
      $marginLefty.animate({
          marginLeft: parseInt($marginLefty.css('marginLeft'), 10) == 0 ? $marginLefty.outerWidth() : 0
      }, 1500, 'swing');
    });
  });
  </code></pre>
  
  <p>What I'm hoping to achieve is that when one of the side Divs/menu is open , the width of Div(A) would decrease (so that all 'visible' divs are aligned) but would add a horizontal scrollbar inside of it. The same applies when both menus are open. 
  Something like <a href="http://imageshack.us/photo/my-images/849/horizontaltoggle.jpg" rel="nofollow">this</a>.</p>
  
  <p>I can't seem to figure out how to make Div(A) to adjust it's width so that a scrollbar appears when the a menu is open, but the scrollbar disapears and Div(A) takes it's original width when the menu(s) is/are closed..</p>
  
  <p>Anybody can help me with the CSS part to properly layout this so i can achieve this functionality?</p>