Float right is not working in IE 7 but works in FF IE8

Question

I have this code

<div id="facebook_bar"> 
  <div style="float:left;">
  <img src="images/topbar_followus.png" width="70" height="25" /> 
  <img src="images/topbar_twitIcon.png" width="30" height="25" /> 
  <img src="images/topbar_fbicon.png" width="30" height="25" />
  </div>
    <div id="newsletter_box"> 


   <img src="images/topbar_subscribe.png" width="220" height="25" />
      <input type="text" name="cm-ktkykk-ktkykk" id="ktkykk-ktkykk" />
      <input type="image" src="images/btn_submit.png" width="55" height="25" />

      </div>
  </div>

css is

#facebook_bar {
 background-color:#323334;
 height:30px;
 padding-top:15px;
 padding-left:20px;
 padding-right:20px;
}
#newsletter_box {
 float:right;
 /*margin-top:-30px;*/

}

The right hand div is showing on next line after the first div not on the same line

Answer 1

You need to float the left bar as well, add float:left to #facebook_bar.

Answer 2

I initally posted this as a comment but might as well give you it as an answer.

Why don't you just use float:left for both #newsletter_box and the inline floated div. This will ensure they both sit at the same position vertically, you can then adjust the horizontal positioning using % widths.

I'd also check out this article to clear the float because you have images involved.