4

This is going to be one of those things where a CSS guy would slap his forehead and go "you've got to be kidding me", and for that I apologize. I also apologize for not being able to find a similar question on Stackoverflow when, I'm quite sure, there's got to be one.

Take a look at this JSfiddle: https://jsfiddle.net/kwende/fqxna79a/

You'll notice two tags in there: 

<div id="left">Left</div><div id="right"><p>Right</p><p>Right 2</p></div>

What I'm weirded out by is if you enter ENTER (in Chrome and Edge) and therefore create a line-break between the first and second divs, the green and red blocks are no longer on the same line. But no CSS changed. No markup changed. I do not understand why (and it's part of my understanding this shouldn't matter) that a newline break within the text document itself would create a new line in the rendering of the markup. But it obviously does.

Example:

enter image description here

Is where I haven't entered ENTER, and

enter image description here

Update: it appears as though this question has been answered before. Here is a good link to follow to understand what's going on.

Community
  • 1
  • 1
  • What do you mean by enter ENTER? – Steve Jan 22 '16 at 04:35
  • It's not just ENTER, I see an identical effect when I put a space in there. – paxdiablo Jan 22 '16 at 04:36
  • 2
    It's because your boxes are inline-blocks. And this is why inline-blocks are not suited for layout, despite what many people might tell you. – BoltClock Jan 22 '16 at 04:36
  • 1
    It is default behavior of `display:inline-block` if you make space between them then also it will move to next line – ketan Jan 22 '16 at 04:37
  • Yeah, I'm learning (the hard way) that inline-block is actually not a good way of laying out things. "The hard way" should be in bold. –  Jan 22 '16 at 04:43
  • 1
    @Ben: There is a *lot* of misinformation online regarding inline-blocks and layout, so I don't blame you. (Hey, maybe I could write a blog post of my own to address this...) – BoltClock Jan 22 '16 at 04:46
  • @BoltClock, so is it something I should avoid? It seems like a very error-prone way of doing things. If I wish to lay things out as I have them in the JSFiddle but also allow for hitting ENTER and making my markup look nice, what do I do? –  Jan 22 '16 at 04:48
  • 3
    There are plenty of hacks to work around things like inter-element whitespace (see [How to remove the space between inline-block elements?](http://stackoverflow.com/questions/5078239/how-to-remove-the-space-between-inline-block-elements)), but they're clunky and rely on all the quirks of inline layout that can very easily be written off by just not using inline layout for something it wasn't intended for to begin with. – BoltClock Jan 22 '16 at 04:51
  • @BoltClock, thanks for your patience in showing me the links to read more. I'll take a step back tonight and read through these things. It's crazy, but I guess I learned something. Have a good one. –  Jan 22 '16 at 04:52

2 Answers2

7

It's not the actual newline that is the problem, but the fact that you enter any white space between the two div elements.

Because you made them inline-block, this makes them behave like inline elements, which are put next to each other if there is no spacing.

However, when you insert white space between them, the layout algorithm sees that 20% + white space + 80% is more than 100%, thus putting the second div on a new line.

You can verify this behaviour by making the second div 79%, while adding the space (or newline). In that case, the div elements will still be next to each other.

paxdiablo
  • 854,327
  • 234
  • 1,573
  • 1,953
Grimace of Despair
  • 3,436
  • 26
  • 38
  • Well, I think you basically won the kick-ass award. Good job and thanks for the response. –  Jan 22 '16 at 04:42
1

Another one solution instead of 79% use on top element font-size equal to 0, here is example of that one https://jsfiddle.net/fqxna79a/2/

body{
 font-size: 0;
}

#left, #right {
 font-size: 16px;
}
zr9
  • 516
  • 1
  • 4
  • 13