title: Vertical Aligned Button
body: <p>Basically I am trying to align two vertical button to the right hand side of my site. When I onclick, it will show another div with the help me jQuery animation. Here is my html code:</p>
  
  <pre><code>&lt;div id="rightBar"&gt;
          &lt;input type='button' id='hideshow' value='Show/Hide' /&gt;
          &lt;input type='button' id='hideshowBookmark' value='Bookmark' /&gt;
          &lt;div id='rightContent'&gt;
              &lt;table style="width:100%; text-align: center;padding: 2px;"&gt;
                  &lt;th colspan="2"&gt;&lt;b&gt;Get Directions&lt;/b&gt;&lt;/th&gt;
                  &lt;tr&gt;&lt;td&gt;&amp;nbsp;&lt;/td&gt;&lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td width="120px"&gt;&lt;label class="title"&gt;Get Location: &lt;/label&gt;&lt;/td&gt;
                      &lt;td&gt;&lt;input id="txtFrom" type="text" class="textInput" placeholder="Outram" /&gt;&amp;nbsp;&lt;img id="AutoFrom" src="img/map.jpg" class="button_search" onclick="GetDataFrom();"/&gt;&amp;nbsp;&lt;label class="title"&gt;To&lt;/label&gt;&amp;nbsp; &lt;input id="txtTo" type="text" class="textInput" placeholder="Hougang mall" /&gt;&amp;nbsp;&lt;img id="AutoTo" src="img/map.jpg" class="button_search" onclick="GetDataTo();" /&gt;&lt;/td&gt;
                  &lt;/tr&gt;
              &lt;/table&gt;
              &lt;div id="divDirectionResults" style="display: none; border:1px solid black; opacity: 0.8; filter: progid:DXImageTransform.Microsoft.Alpha(opacity=80); background:#000000; width:auto; height:190px;"&gt;&lt;/div&gt;
              &lt;table style="width:100%; text-align: center;padding: 2px;"&gt;   
                  &lt;tr&gt;
                      &lt;td colspan="2" style="padding-left:45px;"&gt;&lt;input id="CbAvoid" type="checkbox" checked="checked" /&gt;&amp;nbsp; Avoid ERP&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;&lt;td&gt;&amp;nbsp;&lt;/td&gt;&lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td style="width: 35%;"&gt;&amp;nbsp;&lt;/td&gt;
                      &lt;td&gt;&lt;input value="Get Routing" type="button" onClick="getDirections();" style="width: 109px; height: 23px;font-size:7pt;font-weight:bold;"/&gt;&lt;input type="button" onclick="resetSearchField();" style="width: 58px; height: 23px;font-size: 7pt;font-weight:bold;" value="Reset"/&gt;&lt;/td&gt;
                  &lt;/tr&gt;
              &lt;/table&gt;
              &lt;div id="divComputedDirection"&gt;
              &lt;/div&gt;
          &lt;/div&gt; 
      &lt;/div&gt;
  </code></pre>
  
  <p>And my JavaScript:</p>
  
  <pre><code>     $(document).ready(function() {
      $('#hideshow').click(function() {
          $('#rightContent').animate({
              width: 'toggle'
          }, 1000
                  );
      });
  
      $('#hideshow').val('H\ni\nd\ne\n/\nS\nh\no\nw');
      $('#hideshowBookmark').val('B\no\no\no\nk\nm\na\nr\nk');
  });
  </code></pre>
  
  <p>And the css:</p>
  
  <pre><code>#rightBar
  {
      float: right;
  }
  
  #hideshow
  {
      float: right;
      padding: 10px;
      background: linear-gradient(#81BEF7,#2E9AFE);
      border-radius: 3px;
      font-weight: bold;
      border: 0;
  }
  #hideshow:active
  {
      outline:none;
  }
  #hideshowBookmark
  {
      float: right;
      padding: 10px;
      background: linear-gradient(#81BEF7,#2E9AFE);
      border-radius: 3px;
      font-weight: bold;
      border: 0;
      margin-top: 170px;
  }
  #hideshowBookmark:active
  {
      outline:none;
  }
  
  #rightContent
  {
      width: 320px;
      height: 440px;
      background-color: white;
      display: none;
      margin-right: 40px;
      border-radius: 5px;
      border: 1px solid grey;
  }
  </code></pre>
  
  <p>Somehow, the elements inside the div shifted down when I click on the first button. And my second button is not aligned to the right. </p>
  
  <p>Here is my fiddle: <a href="http://jsfiddle.net/76FX8/" rel="nofollow">Fiddle Link</a></p>
  
  <p>I wonder why is it so? Is it because of my CSS or the way I put the html component?</p>
  
  <p>Thanks in advance.</p>