Feel free to check out this demo I've created for reference: http://jsfiddle.net/jcb9xm44/
In a nutshell, the scenario involves two inline-block divs nested within a parent div:
<div class="outer">
<div class="inner1">
Y
</div>
<div class="inner2">
X
</div>
</div>
The provided CSS sets a specific width for the parent div and different widths for the child divs.
.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;}
Expectation was for both inner divs to be displayed on the same line. Even if the parent div is not wide enough to accommodate both children simultaneously, the negative offset set for the second child should theoretically allow them to fit on a single line. Why does it break the line as observed?