Scottie Scottie - 1 year ago 178
CSS Question

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

I have the following fiddle:

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?


<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>

Answer Source

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>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download