CODEWITHSUNDEEP
htmlcss
shaft
shaft

Reputation: 2229

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?

Upvotes: 5

Views: 5438

Answers (1)

Josh Crozier
Josh Crozier

Reputation: 240988

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:

Upvotes: 6

Related Questions