CSS divs width 50% not working in IE

Question

I'm unable to get this working in IE, the second child doesn't remain in the same line.

HTML:

<div class="outer">
  <div class="inner">left</div>
  <div class="inner">right</div>
</div>

CSS:

.outer
{
  width: 100%;
}

.inner
{
  float: left;
  width: 50%;
}

Answer 1

Change your width's to 49% (or one to 50% and the other to 49%).

Answer 2

Change it to width: 49.9%. Well documented bug in IE.

Answer 3

if you have a set width in px, 50% works correctly.

CSS:

.outer{
width: 900px;
} 
.inner{
width: 50%
}