How to float 2 div's next to each other in IE8

I have two div's and I want to show them next to each other. In normal browsers it's no problem. In IE however, things are messed up:

The red squares point out the div's I'm talking about. The left div has the class "head_narrow", the image has the id "branche_header_image". My CSS looks like this:

.head_narrow {width:380px; float:left;}
#branche_header_image {float:right;}

I am sure that the width of the two divs together is smaller than the width of t开发者_JAVA百科he wrapper. What's going on?

Add "width" in this id #branche_header_image {width:400px; float:right;}

Or use

display:inline;

for both divs instead of using float.

You could probably solve it more elegantly by displaying them as inline blocks inside a container div. But if you absolutely must use floats, place divs above and below your two floaters with style="clear: both;".