Auto fill divs with a large amount of content

Question

I hava a large amount of content which make up with html tag or pure text.

And I have several divs.

How to autofill the remain content to other divs when the first div cannot contain all contents.

Very thankful if any suggestion provided. :)

--- Update ---

Actually, I'm making my own blog which designed like an opened book(a left page and a right page) containing all posts.

Each post is written with a markdown file.Initially, one post has only a left page.

When the mardown file parsed to html code, I will try insert the result html code into 'left page' of my book-like post.

Obviously, If the result html code is huge, one 'left page' is not possible contain all content.On this occasion, my blog will automatically create a new 'right page'(or another 'left page' when the 'right page' is neither enough) which the remain content should autofilled in;

What I'm asking is how I can detect if my 'left page' div is not enough containing the all result html code.And how can I cut the remain content and insert into 'right page'.I totally have no idea how to reach this request.

So, If someone already did this before, maybe you can give me some tips.I'll be very thankful

Answer 1

EDITED again: Ok I will make this out of pure CSS. What you are asking me in the comments is a normal post(on the left side) and if the left sided post is unable to hold all of its content then a copy of the post is revealed on the right side that can hold all of the original content of the old left side.

This is what I am understanding from the information you have given me.

@media (min-width: 601px) {
  #leftSide {
    float: left;
  }
  /*THIS IS ON THE LEFT SIDE*/
  h2 {
    font-size: 2.5em;
  }
  p {
    font-size: 1.5em;
  }
  #rightSide {
    display: none;
  }
}
@media (max-width: 600px) {
  #rightSide {
    display: block;
    float: right;
  }
  /*THIS IS ON THE RIGHT SIDE*/
  h2 {
    font-size: 1.5em;
  }
  p {
    font-size: 1em;
  }
  #leftSide {
    display: none;
  }

<div id="leftSide">
  <h2>Post 1</h2>
  <p>
    Lorem ipsum dolor sit amet,
    <br />consectetur adipiscing elit.
    <br />Maecenas tempor eget ante at
    <br />maximus. Vestibulum sed nulla
    <br />ex. Sed congue maximus lectus,
    <br />vel scelerisque eros.
  </p>
  <h2>Post 2</h2>
  <p>
    Lorem ipsum dolor sit amet,
    <br />consectetur adipiscing elit.
    <br />Maecenas tempor eget ante at
    <br />maximus. Vestibulum sed nulla
    <br />ex. Sed congue maximus lectus,
    <br />vel scelerisque eros.
  </p>
  <h2>Post 3</h2>
  <p>
    Lorem ipsum dolor sit amet,
    <br />consectetur adipiscing elit.
    <br />Maecenas tempor eget ante at
    <br />maximus. Vestibulum sed nulla
    <br />ex. Sed congue maximus lectus,
    <br />vel scelerisque eros.
  </p>
</div>

<div id="rightSide">
  <h2>Post #1</h2>
  <p>
    Lorem ipsum dolor sit amet,
    <br />consectetur adipiscing elit.
    <br />Maecenas tempor eget ante at
    <br />maximus. Vestibulum sed nulla
    <br />ex. Sed congue maximus lectus,
    <br />vel scelerisque eros.
  </p>
  <h2>Post #2</h2>
  <p>
    Lorem ipsum dolor sit amet,
    <br />consectetur adipiscing elit.
    <br />Maecenas tempor eget ante at
    <br />maximus. Vestibulum sed nulla
    <br />ex. Sed congue maximus lectus,
    <br />vel scelerisque eros.
  </p>
  <h2>Post #3</h2>
  <p>
    Lorem ipsum dolor sit amet,
    <br />consectetur adipiscing elit.
    <br />Maecenas tempor eget ante at
    <br />maximus. Vestibulum sed nulla
    <br />ex. Sed congue maximus lectus,
    <br />vel scelerisque eros.
  </p>
</div>

Answer 2

Here an answer to a question like yours.

I think you could divide your text in segments, each of a certain number of characters but without cutting any word. Then you could put the first segment in the first page, the second on second page and so on... The main problem is to trim yourBigText without cut any words, and here the solution I found on the other post helps.

var yourBigText = "CULIACAN, Mexico The Joaquin El Chapo Guzman story could hardly have seemed more unbelievable, with its multiple prison breaks, endless sewers and tunnels, outlandish sums of money and feverish manhunts. And then Sean Penn entered the story.While Guzman was the world's most-wanted fugitive, dodging Mexican military operations and U.S. Drug Enforcement Administration surveillance, he was secretly meeting with the Hollywood movie star in an undisclosed Mexican hideout and has now provided what appears to be the first public interview of his drug-running career, published Saturday by Rolling Stone."; //replace with your big text.
var cutLength;
var remainText = yourBigText.length;
var maxLength = 60;

while (remainText != 0) {


    if (remainText >= maxLength) {

        var trimmedText = yourBigText.substr(0, maxLength);

        //re-trim if we are in the middle of a word
        trimmedText = trimmedText.substr(0, Math.min(trimmedText.length, trimmedText.lastIndexOf(" ")));

        //subtract from the original big string the length of the trimmedText
        cutLength = trimmedText.length;


        if (yourBigText.length > cutLength) {
           yourBigText = yourBigText.slice(cutLength); 
        }

        document.write(trimmedText);
        document.write('<br>');

    } else {
        document.write(yourBigText);
        exit();
    }
    remainText = yourBigText.length;
}

I hope this helps.