How to get float left to not center the div instead in Internet Explorer

Question

In IE10 I have two div tags that I need to get side-by-side. On Mac Chrome, Safari and Firefox, everything works like intended. In Internet Explorer 10 on windows for example, the divs are not floating as intended.

I'm also using some twitter bootstrap classes for different device layouts if that makes any difference.

<div class="hidden-xs" style="width: 1000px;">
    <div style="width: 470px; float: left;">a</div>
    <div style="width: 530px; float: right;">b</div> 
    <div style="clear: both;"></div>
</div>

In Internet Explorer 10 it looks like this:

In Chrome it looks like this (as intended):

In Internet Explorer 10 when I uncheck the box-sizing property, the float starts to work but It messes up other elements on the site.

My questions:

1. Why is IE doing this when in other browsers (on Mac) it seems to work.

2. How to simply fix it? I've tried changing the widths of the divs and replaced float left with right . I also removed the clear: both div to see any difference.

3. How does removing the box-sizing fix the problem?

Answer 1

just try this

    <div class="hidden-xs" style="width: 1000px; float:left;">
      <div style="width: 470px; float: left;">a</div>
      <div style="width: 530px; float: left;">b</div> 
      <div style="clear: both;"></div>
   </div>

Answer 2

对于你的530px div使它浮动：向左而不是向右并添加位置：相对于530和470 div。