css relative positioning breaks div into new line

Question

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?

Why did you expect so? widths of the nested divs exceed the available space inside the parent. — Hashem Qolami, Oct 12 '14 at 23:54
considering that I offset the element to the left, it wouldn't execeed the full width. That's why I ask this question. — shaft, Oct 12 '14 at 23:59
@shaft `left`/`right`/.. properties -unlike `margin` - won't move a `relative` positioned element physically so that the occupied space would be remain. — Hashem Qolami, Oct 13 '14 at 00:01
@Hashem. Thanks for the explanation. But still confusing: from w3schools (http://www.w3schools.com/cssref/pr_pos_left.asp): >For relatively positioned elements, the left property sets the left edge of an element to a unit to the left/right to its normal position. — shaft, Oct 13 '14 at 00:09
@shaft First of all, please avoid referring low quality resources such as w3schools for learning purposes. using offset properties on `relative` positioned element just moves the element visually but the element is still there at its real position logically, Have a look at: http://stackoverflow.com/questions/5256211/negative-margins-vs-relative-positioning — Hashem Qolami, Oct 13 '14 at 00:14
@HashemQolami Wasn't aware that w3schools is low quality, typically it ranks top one on google when I search for css. Anyway, your explanation is very clear! The logical space vs physical space ;) This helps a lot ! — shaft, Oct 13 '14 at 00:22
@shaft Personally, I'd rather refer to the [specs](http://www.w3.org/TR/#tr_CSS), however you may find [Mozilla Developer Network](https://developer.mozilla.org/en-US/docs/) or [Web Platform](http://www.webplatform.org/) more understanable. — Hashem Qolami, Oct 13 '14 at 00:30

score 6 · Accepted Answer · edited May 23 '17 at 12:31

6

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:

You had a typo - left: -50x -> left: -50px.
inline elements respect whitespace in the markup.
The element's border is included in its width calculations. Use box-sizing: border-box to include it.
You could alternatively use margin-left: -50px as Mary Melody pointed out.

edited May 23 '17 at 12:31

Community

1
1

answered Oct 12 '14 at 23:53

Josh Crozier

233,099
56
391
304

Thanks a lot. A comment above mentions also a trick with negative margin. Which one would you recommend? It's also confusing that a negative margin does not have the same effect as offsetting the div. Any explanation for this? – shaft Oct 13 '14 at 00:01
2

@shaft Maybe this example I made will help you understand - http://jsfiddle.net/tqzxh0wo/ The margin will affect other elements whereas the relative positioning won't. – Josh Crozier Oct 13 '14 at 00:11

css relative positioning breaks div into new line

1 Answers1