Css relative positioning splits div into new line

Question

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

There are 2 built-in div blocks in the parent div:

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

css assigns the width to the parent div and 2 widths to the child div.

 .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 expected both divs to appear on the same line. Although the parental reach is not wide enough to hold both children, since the second child has a negative bias, it should be possible to fit both of them on the same line. Why does this break the line?

Answer 1

Why does this break the line?

As you said, this is because the parent element is not enough for both elements. To change this behavior, you can add white-space: nowrap to the parent element to prevent inline-block elements from flowing around.

Example here

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

Side notes:

• You had a typo - left: -50x → left: -50px .
• inline elements respect markup spaces .
• The border of elements is included in the width calculations. Use box-sizing: border-box to enable it.
• Alternatively, you can use margin-left: -50px as Mary Melody .