css relative positioning breaks div into new line

I have the following fiddle for this question: http://jsfiddle.net/jcb9xm44/

There are 2 inline-block div’s in a parent div:

<div class="outer">
  <div class="inner1"> Y </div>
  <div class="inner2"> X </div>
</div>

The css assigns a width to the parent div and 2 widths to the child div’s.

.outer {
  width: 210px;
  border: 1px solid red;
}

.inner1 {
  width: 200px;
  border: 1px solid orange;
  display: inline-block;
}
.inner2 {
  width: 50px;
  position:relative;
  left: -50x;
  display: inline-block;
  border: 1px solid lightblue;
}

I was expecting that both divs appear on the same line. Although the parent is not wide enough to hold both children, since the second child has a negative offset, it should be possible to fit them both on the same line. Why does it break the line?


solution

Why does it break the line?

As you stated, it’s because the parent element isn’t wide enough for both elements. To change this behavior, you could add white-space: nowrap to the parent element in order to prevent the inline-block elements from wrapping.

Example Here

.outer {
  width: 210px;
  border: 1px solid red;
  position:relative;
  white-space: nowrap;
}

Side notes: