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:
The css assigns a width to the parent div and 2 widths to the child div’s.
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?
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.