Scottie Scottie - 4 months ago 27
CSS Question

Firefox float bug? How do I get my float:right on the same line?

I have the following fiddle:

http://jsfiddle.net/q05n5v4c/2/

In Chrome, it renders just fine. The chevron is on the right side.

However, in Firefox, it drops the Chevron down 1 line.

I've searched google and found several posts about this bug, but none of the suggestions have helped.

Any CSS experts out there that can tell me what I'm doing wrong?

Html:

<div class="btn-group">
<button data-toggle="dropdown"
class="btn btn-default dropdown-toggle"
style="width: 400px;text-align: left;">

Checked option

<span class="glyphicon glyphicon-chevron-down"
style='float: right;'></span>
</button>
</div>

Answer

Change the order of the float, put it before the text like this:

<div class="btn-group">
  <button data-toggle="dropdown" class="btn btn-default dropdown-toggle"style="width: 400px;text-align: left;">        
  <span class="glyphicon glyphicon-chevron-down" style='float: right;'></span>Checked option    </button>
</div>

http://jsfiddle.net/q05n5v4c/3/