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

CssFirefoxCss Float

Css Problem Overview

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>

Css Solutions

Solution 1 - Css

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/

Solution 2 - Css

It seems like the property white-space is the cause of the issue. With the class btn this property is:

> white-space:nowrap

If you change that property works fine:

.btn {
    white-space:normal
}

Check the Demo Fiddle

Solution 3 - Css

If you don't wish to reverse the order of your elements, you could float: left; the first element.

Solution 4 - Css

Remove the float on the span, add position: absolute to it and position it using top/right/bottom/left.
Note: .btn-group already have position: relative from bootstrap.

HTML

<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"></span>
    Checked option
  </button>
</div>

CSS

div.btn-group span {
  position: absolute;
  top: 7px;
  right: 12px;
}

Here's a working fiddle.

Solution 5 - Css

Here is one more solution:

give style your span tag like this.

position:absolute;
right: 5px;
top : 9px
Categories
Recommended Css Solutions
Recommended Firefox Solutions

Previous Solution:

Twig syntax highlighting sublime text

Sublimetext2TwigSyntax Highlighting

Next Solution:

Do you need a database transaction for reading data?

JavaSpringHibernateJdbcTransactions

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionScottieView Question on Stackoverflow
Solution 1 - CssscooterlordView Answer on Stackoverflow
Solution 2 - CssDaniPView Answer on Stackoverflow
Solution 3 - CssMichael PetitoView Answer on Stackoverflow
Solution 4 - CssSiew Ching LeeView Answer on Stackoverflow
Solution 5 - CssMunshi AzharView Answer on Stackoverflow