Why Does the Innerhtml of Several Inline-Blocks Nested in a Block Element Affect the Positioning of the Inline-Blocks

Why does the innerHTML of several inline-blocks nested in a block element affect the positioning of the inline-blocks?

Add vertical-align: top where you have display: inline-block.

http://jsfiddle.net/thirtydot/pPyaG/3/

The initial value of vertical-align is baseline, which causes the issue you're experiencing.

Read this, particularly the "baseline" section: http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/

A comparison of how common values of vertical-align look: http://www.brunildo.org/test/inline-block.html

Why does the inline-block element appear below the inline element? How to make them appear on the same line?

inline-block* will not share a space inline with another element if you don't give it a width. So either inline both which is sloppy, or use inline-block, widths, and vertical-align for smaller content such as #numeral. Note, #numeral width is 2ch a ch unit is roughly about the width of a character for the exact description see this article

*_{when it's content exceeds the width of it's element's parent's width}

Demo

#numeral {
  display: inline-block;
  width:2ch;
  vertical-align:top
}

#content {
  display: inline-block;
  width:90%;
}

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1" charset="utf-8">
  <title>Test</title>
</head>

<body>
  <span id="numeral">1.</span>
  <span id="content">BLAH BLAH BLAH BLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH      BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH BLAHBLAH BLAH </span>
</body>

</html>

Chrome rendering odd CSS layout (Firefox and IE are good)

You just need to specify the vertical-align for those inline-block elements.

Also, there's a little bit of extra CSS you should have when using inline-block for older versions of IE.

.article-month-column {
  width: 224px;
  height: 450px;
  margin-right: 15px;
  background: darkviolet;
  display: inline-block;
  overflow: auto;
  white-space: normal;
  vertical-align:top;

  /*For IE*/
  *display: inline;
  zoom:1;
}

display:block inside display:inline

when i read the spec, i find your question actually quite well answered:

When an inline box contains a block box, the inline box [...] [is] broken around the block. The [in]line boxes before the break and after the break are enclosed in anonymous boxes, and the block box becomes a sibling of those anonymous boxes.

<BODY style="display: inline; ">
This is anonymous text before the P.
<P>This is the content of P.</P>
This is anonymous text after the P.
</BODY>

The resulting boxes would be an anonymous block box around the BODY, containing an anonymous block box around C1, the P block box, and another anonymous block box around C2.

or, visually:

+- anonymous block box around body ---+
| +- anonymous block box around C1 -+ |
| |                                 + |
| +---------------------------------+ |
|                                     |
| +- P block box -------------------+ |
| |                                 + |
| +---------------------------------+ |
|                                     |
| +- anonymous block box around C2 -+ |
| |                                 + |
| +---------------------------------+ |
+-------------------------------------+

now to your question: is this different from <BODY style="display: block; ">?

yes, it is. while it is still 4 boxes (anonymous block box around body now being BODY block box), the spec tells the difference:

Properties set on elements that cause anonymous block boxes to be generated still apply to the [generated anonymous block] boxes and content of that element. For example, if a border had been set on the BODY element in the above example, the border would be drawn around C1 (open at the end of the line) and C2 (open at the start of the line):

+--------------------------------------
| This is anonymous text before the P. 
+--------------------------------------
  This is the content of P.
 --------------------------------------+
  This is anonymous text after the P.  |
 --------------------------------------+

this is different to <BODY style="display: block; ">:

+--------------------------------------+
| This is anonymous text before the P. |
|                                      |
| This is the content of P.            |
|                                      |
| This is anonymous text after the P.  |
+--------------------------------------+

Why can't the p tag contain a div tag inside it?

An authoritative place to look for allowed containment relations is the HTML spec. See, for example, http://www.w3.org/TR/html4/sgml/dtd.html. It specifies which elements are block elements and which are inline. For those lists, search for the section marked "HTML content models".

For the P element, it specifies the following, which indicates that P elements are only allowed to contain inline elements.

<!ELEMENT P - O (%inline;)*            -- paragraph -->

This is consistent with http://www.w3.org/TR/html401/struct/text.html#h-9.3.1, which says that the P element "cannot contain block-level elements (including P itself)."

How to change text inside a div without changing any other element in the div

With element.innerText() you're essentially overwriting the whole content of your div - including other html elements such as the anchor tag.

There's a child attached to your div that actually holds your text.
You can reference it via document.getElementById("title").firstChild along with it's .data property.

function changeText(text) {  document.getElementById("title").firstChild.data = text;}const button = document.getElementById('button');button.addEventListener('click', () => changeText('the new text I want '));

<div class="title" id='title'>Text I want to change  <a href="https://link.com" target=_blank><img src="icon.svg" id='icon'></a></div>
<button id='button'>click here to change text<button>

Why Does the Innerhtml of Several Inline-Blocks Nested in a Block Element Affect the Positioning of the Inline-Blocks