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 the wrapper. What's going on?

回答1:

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

Or use

display:inline;

for both divs instead of using float.

回答2:

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;".

来源：https://stackoverflow.com/questions/6439577/how-to-float-2-divs-next-to-each-other-in-ie8