title: .animate({ width: 'toggle' }) without messing up the content
body: <p>So I'm having a problem with my left-sliding div. Currently I'm using <code>$('#searchBox').animate({ width: 'toggle' });</code> to show it, but while it is sliding it looks like the the content inside of it gets their float ignored. They are fixed after the div stops sliding, but it's a weird effect while it slides. The codes I'm using:</p>
  
  <pre><code>// Search bar dropdown script
  
      function searchBar() {
          $('#searchBox').animate({ width: 'toggle' });
          $('#searchBoxButton').fadeToggle('fast');
      }
  
      function searchBarClose() {
          $('#searchBox').animate({ width: 'toggle' });
          $('#searchBoxButton').fadeToggle('fast');
      }
  </code></pre>
  
  <hr>
  
  <pre><code>&lt;div id="searchBoxButton" onclick="searchBar()"&gt;&lt;/div&gt;
  &lt;div id="searchBox"&gt;
      &lt;form&gt;
          &lt;div id="magnifier"&gt;&lt;/div&gt;
          &lt;input id="searchBoxInput" placeholder="Search me" type="text"/&gt;
          &lt;div class="closeButton" onclick="searchBarClose()"&gt;&lt;/div&gt;
      &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  
  <hr>
  
  <pre><code>    #searchBoxButton {
      width: 50px;
      height: 50px;
      background-color: #000;
      right: 0;
      position: absolute;
      margin: -5px auto 0 auto;
  }
  
  #searchBox {
      display: none;
      right: 0;
      position: fixed;
      margin: -5px auto 0 auto;
      background-color: #202020;
      z-index: 1;
      padding: 3px 0;
      border: 1px solid #151515;
  }
  
  #searchBox input[type="text"] {
      width: 150px;
      outline: none;
      padding: 3px 2px;
      background-color: #3F3F3F;
      border: 1px solid #4d4d4d;
      border-radius: 3px;
      font-family: "Trebuchet MS" sans-serif;
      color: #c0c0c0;
      float:left;
  }
  
  #searchBox input[type="text"]:focus {
      border: 1px solid #797979;
      box-shadow: 0px 0px 15px -2px #797979;
      background-color: #444444;
  }
  
  #searchBoxInput::-webkit-input-placeholder { /* WebKit browsers */
      color:    #7d7d7d;
  }
  #searchBoxInput:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
      color:    #7d7d7d;
  }
  #searchBoxInput::-moz-placeholder { /* Mozilla Firefox 19+ */
      color:    #7d7d7d;
  }
  #searchBoxInput:-ms-input-placeholder { /* Internet Explorer 10+ */
      color:    #7d7d7d;
  }
  
  #magnifier {
      background: url("http://placehold.it/13x13") no-repeat;
      width: 13px; height: 13px;
      float: left;
      margin: 7px 6px;
  }
  
  .closeButton {
      border-radius: 15px;
      cursor: pointer;
      background: url("http://placehold.it/15x15") center no-repeat;
      width: 15px; height: 15px;
      float: left;
      -webkit-transition: background 200ms ease-in-out;
      -moz-transition: background 200ms ease-in-out;
      -o-transition: background 200ms ease-in-out;
      transition: background 200ms ease-in-out;
  }
  
  #searchBox .closeButton {
      margin: 7px 4px;
      float: left;
  }
  
  .closeButton:hover {
      background-color: #373737;
      -webkit-transition: background 200ms ease-in-out;
      -moz-transition: background 200ms ease-in-out;
      -o-transition: background 200ms ease-in-out;
      transition: background 200ms ease-in-out;
  }
  
  .closeButton:active {
      background-color: #212121;
  }
  </code></pre>
  
  <p>I know a workaround for this problem would be using absolute positions on <code>#magnifier</code>, <code>#searchBoxInput</code> and <code>.closeButton</code>, but that wouldn't be good for me. Is there any other way to do this? </p>
  
  <p>Fiddle: <a href="http://tinker.io/ef4f7" rel="nofollow">http://tinker.io/ef4f7</a></p>