Div Gets Misplaced on Text Insertion and Text Goes Out of Div

Div gets misplaced on text insertion and text goes out of div

Seems like a vertical-align issue. Try setting it explicitly:

.slide { vertical-align:top; }

Fiddle

Browsers have a slightly complex algorithm for computing the baseline (default value) of vertical-align for floated elements or with inline-block display. Giving it a explicitly top value usually fixes the issue.

Oh I almost forgot to add why the line isn't breaking. It is simple: Your white-space:nowrap is inherited to descendants elements and it forces text to be in a single line. All you have to do is reset it before reaching the text content which require word-wrap, so:

.slide { white-space: normal; word-wrap: break-word; }

Fiddle

For the vertical-align explanation, it is a little complex, here is the spec for the default vertical-align value - baseline:

Align the ‘alphabetic’ baseline of the element with the ‘alphabetic’ baseline of the parent element. If the inline element doesn't have an ‘alphabetic’ baseline, align the bottom of the box, including its margin for replaced elements, with the parent's ‘alphabetic’ baseline. The dominant baseline is set to ‘alphabetic’ if there is no parent or if there is a flow orientation change between this element and its parent, otherwise it is set to ‘no-change’.

Better explain with an example. Open this fiddle. I've added some text in-between the slides which represent the parent's alphabetic baseline. The baseline is the red line in this image:

Sample Image

As you can see, when the child has an alphabetic baseline, both parent and child alphabetic baselines are aligned as per the first line of the spec: "Align the ‘alphabetic’ baseline of the element with the ‘alphabetic’ baseline of the parent element."

The other sibling slides do not have any non empty/white-space-only TextNodes, therefore they do not have an alphabetic baseline to align with and the second statement of the spec kicks in: "If the inline element doesn't have an ‘alphabetic’ baseline, align the bottom of the box, including its margin with the parent's ‘alphabetic’ baseline."

Disappearing elements and strange behaviour when switching from html to php

Nothing breaks.
After replicating your code on my xampp and testing it as both .html and .php
They both have the same result.

Here is my code

<!DOCTYPE html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <style>
      h1 {
        font-weight: 650;
        text-align: center;
      }

      .timeline {
        width: 10px;
        height: 2000px;
        background: #454545;
        position: relative;
        margin: auto;
      }
    </style>
  </head>
  <body>
    <div class="row" style="margin-top: 46px;">
      <h1> BIOGRAPHY </h1>

      Is this working!?

      <div class="timeline"></div>
    </div>
  </body>
</html>

if you still have an issue, I would suggest you

Restart your Xampp Server
Tryout another browser

+++ GOODLUCK +++

javascript .innerHTML() inserts outside div

Check this please

function newMail() {  x = x + 1;  var input =    "   <tr>" +    "      <td>To (email):</td>" +    "      <td><input type='text' name='to" + x + "' /></td>" +    "    </tr>";  document.getElementById("add").innerHTML += input;}

<script>  var x = 0;</script><table>  <tr>    <td>From:</td>    <td>      <input type="text" name="from" />    </td>  </tr>  <tr>    <td>To (email):</td>    <td>      <input type="text" name="to0" />    </td>  </tr>
  <tr>    <td>To (email):</td>    <!-- this works -->    <td>      <input type="text" name="to0" />    </td>  </tr>  <tbody id="add"></tbody>
  <tr>    <td align="left">      <input type="submit" value="send">    </td>    <td align="right">      <input type='button' onclick='newMail()' value='Add recipient' />    </td>  </tr>

How to display incomplete HTML from another page inside a div

Simply create a template tag, insert your content inside it. Then access the innerText (which removes the HTML). Then insert this into the relevant location.

Of course, you'd be better to trim the content using your API. But you haven't mentioned what server technology you are using.

let content = "<p><span style=\"color: #292929; font-family: charter, Georgia, Cambria, "Times New Roman", Times, serif; font-size: 20px; letter-spacing: -0.003em;\">This is line one in my post. This is line two from the post.</span></p><p><br /></p><p><img alt=\"\" class=\"cf td te\" height=\"467\" role=\"presentation\" src=\"https://miro.medium.com/max/1400/0*zTHDVE-0s8Wyajw7\" style=\"box-sizing: inherit; height: auto; max-width: 100%; vertical-align: middle; width: 692px;\" width=\"700\" />              <span style=\"color: #757575; font-family: fell, Georgia, Cambria, "Times New Roman", Times, serif; font-size: 14px; text-align: center;\">Photo by </span><a class=\"au mu\" href=\"https://somephotolink.com/al\" rel=\"noopener ugc nofollow\" style=\"box-sizing: inherit; font-family: fell, Georgia, Cambria, "Times New Roman", Times, serif; font-size: 14px; text-align: center;\" target=\"_blank\">Manvendra</a><span style=\"color: #757575; font-family: fell, Georgia, Cambria, "Times New Roman", Times, serif; font-size: 14px; text-align: center;\"> on </span><a class=\"au mu\" href=\"https://unsplash.com/?utm_source=medium&utm_medium=referral\" rel=\"noopener ugc nofollow\" style=\"box-sizing: inherit; font-family: fell, Georgia, Cambria, "Times New Roman", Times, serif; font-size: 14px; text-align: center;\" target=\"_blank\">Unsplash</a></p><div class=\"pk pl pm pn po l\" style=\"box-sizing: inherit; margin-bottom: 40px;\"><div class=\"o eb\" style=\"box-sizing: inherit; display: flex; justify-content: center;\"><div class=\"eq cf gt gu gv gw gx gy gz ha hb\" style=\"box-sizing: inherit; margin: 0px 32px; max-width: 692px; min-width: 0px; width: 692px;\"><article style=\"box-sizing: inherit;\"><div class=\"l\" style=\"box-sizing: inherit;\"><div class=\"l\" style=\"box-sizing: inherit;\"><section style=\"box-sizing: inherit;\"><div style=\"box-sizing: inherit;\"><div class=\"kt of qy qz ra\" style=\"box-sizing: inherit; word-break: break-word; word-wrap: break-word;\"><p class=\"pw-post-body-paragraph ry rz rc sa b sb sc hr sd se sf hv sg kc sh si sj sk sl sm sn so sp sq sr ss kt dr\" data-selectable-paragraph=\"\" id=\"5abb\" style=\"box-sizing: inherit; color: #292929; font-family: charter, Georgia, Cambria, "Times New Roman", Times, serif; font-size: 20px; letter-spacing: -0.003em; line-height: 32px; margin: 2em 0px -0.46em; word-break: break-word;\">This is line 3 from the post .This is line 4 from the post . This is line 5 from the post . This is line 3 from the post .xxxxxxxxx. xxxxxxxxxxx.xxxxxxxxxxx.</p></div><div class=\"o eb jm fp nz ti\" role=\"separator\" style=\"box-sizing: inherit; display: flex; justify-content: center; margin-bottom:"; 

let template = document.createElement('template');
template.innerHTML = content;

let partial = template.content.textContent.substring(0, 30);

document.querySelector(".posts .post .postSample").innerText = partial;

<div class="posts">
    <div class="post">
        <h2>apiresponse.posts.post.title</h2> <!--psuedo code-->
        <div class="postSample">    
        <div>
    </div>
    <!--many such repeated divs based upon api response-->
<div>

CSS display:table breaks when first element in table-cell is not text

This is all due to the vertical-align that defaults to baseline, it is the expected behavior as your examples have very differently alphabetic baselines. Actually, without text content the div doesn't have an alphabetic baseline, so bottom of the box is aligned with the parent's alphabetic baseline as per the spec.

Thankfully it is easy to workaround:

#container > div {
   vertical-align:top;
}

Demo

Here's a related answer (check last section), though your use case is a bit different:

Simply put, when there's no text content, your select element will be aligned with the parent's alphabetic baseline. This will push the parent's alphabetic baseline down so the select can still fit inside the parent having its bottom aligned with the parent's alphabetic baseline. All other divs' baselines are still aligned to this baseline, which has been pushed down by the select.

By adding text content before your form element, your div will have an alphabetic baseline which doesn't push the parent's baseline as the select would. All divs' baselines are still aligned to the parent's alphabetic baseline as in the previous case, but this time the parent's baseline hasn't been pushed down.

Here's a rough demonstration of the 2 paragraphs above (beware of mad MS-Paint skills):

Sample Image

As you can see, in the second scenario, the baseline of the parent is pushed down so the select element can still fit inside the parent while having its bottom aligned with the parent's baseline.

vertical-align:top saves the browser from having to comply with such complex rules. It may also save us from many headaches when applying it to floated/inline-block/table'd content.

Inserting text into a text field when a div class is clicked

Unfortunately your only option is to use jQuery or Javascript (or some other browser-side library). PHP only deals with server-side code and can spit out the html fields that you want to use but it can't interact with elements after the page has been loaded into the browser.

I can
t explain to you how to use jQuery but only that it is well worth it to start learning it now. It's very easy to do simple things with it, so don't be intimidated.

Here's what I would suggest to get started:
Loading the most recent jQuery library by using this tag:

<script src="http://code.jquery.com/jquery-latest.js"></script>

Then you'd target the appropriate buttons and do something when they are clicked on:

$("#boldButtonID").click(function(){
    //get the index of the cursor
    //select the word that the cursor is on by stopping at the space (" ") character in either direction, then insert [b] and [/b] in the appropriate locations.
}

You can also get the text that is selected by using this function, which I got here: Get the Highlighted/Selected text

function getSelectionText() {
var text = "";
if (window.getSelection) {
    text = window.getSelection().toString();
} else if (document.selection && document.selection.type != "Control") {
    text = document.selection.createRange().text;
}
return text;
}

Then you can use the functions .before().html("[b]") and .after().html("[/b]") to place your tags where you need.

I hope that helps shed some light on what you'd need to do.

Cheers!

Div Gets Misplaced on Text Insertion and Text Goes Out of Div