Float:right divs appear on next line in IE only

css internet-explorer html css-float

16,810

Solution 1

A colleague of mine recently had a very similar problem. I recommended simply using positioning rather than floating. I believe you could do the same here:

<div style="background-color:red; position:relative;">
    Text
    <div style="background-color:yellow; position:absolute; right:0; top:0;">Right</div>
</div>

I don't know if you have a requirement to use floats or not. Using the positioning method will cause the positioned element to not take up space in normal flow, but otherwise keep the correct source order and visually accomplish what I think you want to do.

Solution 2

Set a width value on your inner div and make it display: inline-block. Div's are block elements that take 100% width of the parent, that's why IE puts it on the next line.

Solution 3

I am not sure if it is a possibility for you, but putting the text within the outer div in a div of its own seems to solve the problem

<div style="background-color:red;">
    <div style="float: left;">Text</div>
    <div style="background-color:yellow; float:right;">Right</div>
</div>

Solution 4

I just hit this problem in IE7 - in my case, the item that was going to clear the float was going to be full width anyway. I just set that to "float: none;clear: left" and it seems to work.

View more solutions

16,810

Author by

spaaarky21

I've been programming since I was in kid and doing it for a living for over a decade. I mostly work with Android now, play with machine learning in my free time and did a ton of Enterprise Java in the past. Some publicly available projects I've developed include a library for implementing OO state machines, streamlining the use of Android databases and ContentProviders and type-safe Android URI matching.

Updated on July 28, 2022

Comments

spaaarky21 almost 2 years
Ok, so I'm working on a prototype of my UI before I start coding the webapp. I got the design mostly done while working in Firefox and (of course) when I tested it in IE, there were a lot of rendering issues. One of those issues is that if I have a div that contains some text and another div that's set to float:right, that nested div shows up on the next line, below its parent div. This is the problem markup in its simplest form...
```
<div style="background-color:red;">
    Text
    <div style="background-color:yellow; float:right;">Right</div>
</div>
```
I scoured the internet for solutions and the only working relevant solution I found that makes this work in IE is to place the floating div at the beginning of its parent like this...
```
<div style="background-color:red;">
    <div style="background-color:yellow; float:right;">Right</div>
    Text
</div>
```
In reality, the nested div has a class and my CSS is floating that class. But what happens if I eventually make another stylesheet to target mobile devices and I no longer want that inner div to be floated? Then the content itself would be out of order in HTML, just for the sake of accommodating a CSS issue in IE. Is there a better way to solve this?
spaaarky21 over 13 years

Thank you for the suggestion. I tried that but it's causing me two problems. First, the outer div is actually colored in my application. It's going to be a primitive navigation bar and if I float both of its children, the outer div will collapse down to a height of 0px. I could set the height but this "wrapping floats" problem is happening in other places where the contents wrap and I can't set a height. The second problem is that there is also a logo from another div that is floated to the left. The way it is now, that logo displaces "Text" but if I float it left as well, they overlap.
spaaarky21 over 13 years

No luck in IE 8 with <div style="float:right; display:inline-block; width:5em;">Right</div>.
kobe over 13 years

@spaarky , if it is wrapping problem , you can use one of the overflow property's
spaaarky21 over 13 years

That's so simple it's genius! Although I will add the caveat that absolute positioning is relative to the first ancestor with non-static positioning (the default.) In my application, the outer div is not at the beginning of the page so when I apply absolute positioning to the inner div, it actually moved to the very top right of the page. So, to get around that, I added relative positioning to the parent without specifying left or top. It works perfectly in IE, FF and Safari. Thank you so much!
spaaarky21 over 13 years

@gov I'm not especially familiar with CSS so excuse me if I'm missing something but won't overflow just change the behavior when overflow does happen? What I would like to do is prevent that overflow in the first place and have that child div not wrap in IE.
spaaarky21 over 13 years

Wait a minute, I might have spoken too soon. Unlike floating the div, positioning it absolutely allows it to overlap the container's other children.
Shoaib over 13 years

You may be able to fix the new issue by adjusting the z-index. Any chance you could post a more complete code sample?
spaaarky21 over 13 years

I could but I'm not sure that will be necessary actually. Sorry I've been so back-and-forth on this. I think absolute positioning will do just fine. Even if I were using a float approach, I don't need (or even want, now that I think about it) the text to flow around the floated div. So, if absolute positioning works more reliably across browsers, I'll stick with that. What I ended up doing was positioning one div to the right and setting margin-right on the other to keep its content from overlapping. Thanks again for the help.
rgin almost 12 years

This actually helped me. The trick is to define widths to all floated elements. It's tedious, but hey, what do you expect from IE?
Ricardo almost 8 years

You alternative approach inspired me to think out of the box. I fixed a similar issue by moving my last child <span> out of its parent's <span> which had other <span> siblings. Thanks!