Question

Very simple HTML:

<div id="wrapper" style="background-color:green;">WRAP
<div style="float:right;">float2</div>
</div>

Results:

• in Chrome, IE8, IE9: the words “WRAP” and “float2” position on the
  same line; both words and the whole line have green BG
• in IE7 only: word “WRAP” position on 1st line and has green BG;
  word “float2” position on 2nd line and has white BG

So – what I want: IE7 behavior==IE8/9/Chrome behavior.

Answer 1

you just need to invert the order of your elements, so that IE can float the inner div prior to displaying the text:

<div id="wrapper" style="background-color:green;">
  <div style="float:right;">float2</div>
  WRAP
</div>