title: -webkit-transform rotate without float attribute
body: <p>I am trying to use a double right-angle quote (<code>&amp;raquo;</code>) as a dropdown indicator. I have it working in my navigation where there is a <code>float: right;</code> assigned to it. Outside of the navigation however, when I don't have a <code>float:</code> assigned to it, it doesn't rotate. I am rotating the arrow with jQuery &amp; CSS3 by adding a class <code>down</code> to the <code>&lt;span&gt;</code> element the right-angle quote is wrapped in. </p>
  
  <p>Here is the <code>down</code> css class that gets added to rotate the arrows:</p>
  
  <pre><code>.drop-arrows.down {
      /* FF Chrome Opera etc */
      -webkit-transform: rotate(90deg) !important; 
      -moz-transform: rotate(90deg) !important;
      -o-transform: rotate(90deg) !important;
      /* IE */
      filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
  }
  </code></pre>
  
  <p>That class is added upon activation of the dropdown via jQuery. The only issue is this doesn't work without a <code>float</code> added to the arrow container as well, which is very confusing to me. </p>
  
  <p>Here is the HTML wrapping the arrow: </p>
  
  <pre><code>&lt;a id='filter-trigger' href='javascript:void(0);'&gt;FILTERS &lt;span class='drop-arrows'&gt;&amp;raquo;&lt;/span&gt;&lt;/a&gt;
  </code></pre>
  
  <p>Does <code>-webkit-transform</code> require a float to work? Am I doing something wrong?</p>