Firefox Float Bug? How to Get My Float:Right on The Same Line

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

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/

strange firefox float positioning, works fine in chrome/safari (CSS)

I finally found the issue and it was a negative margin in one of the sections above the problem section. Seems that firefox doesn't like negative margins very much.. Thanks for the help guys :-)

Firefox unexpected line break using floats & overflow hidden

Add display: inline-block; to .box:

Demo

Float: right adds a new line in Firefox

You should remove the floats on the :before/:after, replacing it by a position absolute, and adding a position relative on .btn-product.

You'll be free to place your icons (top;right;bottom;left) as you want with minor difference in browsers.

How do I keep CSS floats in one line?

Wrap your floating <div>s in a container <div> that uses this cross-browser min-width hack:

.minwidth { min-width:100px; width: auto !important; width: 100px; }

You may also need to set "overflow" but probably not.

This works because:

• The !important declaration, combined with min-width cause everything to stay on the same line in IE7+
• IE6 does not implement min-width, but it has a bug such that width: 100px overrides the !important declaration, causing the container width to be 100px.

Firefox float behaves differently then in Chrome and IE

You should group your text and title elements together, and provide them a width.

From the snippet you supplied, it looks like both screenshots are actually obeying the rules you've supplied - both are floating the image to the right of your text.

However, there's no specification of how far over it should be -- just how far from the text (40px padding-left) and how large the ENTIRE item should be ("wrapper" @ 1000px);

Try this:

<div class="wrapper">
    <img src="http://www.chriswickham.co.uk/gohard/img/workouts/hammer_curl.png" height="85%" style="float:right;padding-left:40px"/>
    <div class="content">
       <h1>Hammer Curl</h1>
       <h2>Arms</h2>
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dignissim ut mauris in vehicula. Suspendisse sodales nec quam in convallis. In quis ante eros. Pellentesque id lacus et massa tempor hendrerit.</p>
    </div>
   <div style="clear:both"></div>
</div>

CSS

.content {
    width: 700px // or whatever you want to set it to
}

By wrapping the non-image elements together, and specifying a width for them specifically, you should be able to keep the experience the same across most browsers.

EDIT: Fixed some formatting.

Firefox: automatic linebreak with a sibling [float: right] element + overflowing text

I found out a solution with flexbox!

I added a display: flex to the .content div with flex-direction: row-reserve to keep the order of the element and still be able to use float: right for IE9.

In addition, there is a flex: auto property on .left-block divs to take as much space as possible (Note: IE11 needs flex-basis to be set to be able to calculate the space wanted by the flex-grow property. That's why I used auto instead of 0 on the flex property. See details)

The completed CSS code

.content {
  width: 100%;
  margin: 5px 0px;
  height: 85px;
  display: flex; /* Initialize flexbox */
  flex-direction: row-reverse; /* keep the order of the element */
  border: 1px dashed gray;
}
.left-block {
  font-size: 25px;
  line-height: 25px;
  overflow: hidden;
  padding: 0 20px;
  text-align: left;
  background-color: lightgray;
  flex: auto; /* the text blocks take all the available space */
}

Here's the fiddle with the correction. Sometimes IE9 takes 2 lines of text instead of 1 (the text is 2px larger that the container, I don't know why...) but atleast it's readable!

---

Related Topics