Two-column text layout

This topic is not a statement of the basics on the topic “How to make two columns on your page using divs and css”. My task was to split the monolithic text into two columns, just like MS Word does. There is no standard css tag for this, so I had to dance a bit with a tambourine to solve the problem.
The width of the column with the text greatly affects the ease of perception of information by the user. And so, given the current popularity of widescreen monitors, the breakdown of text into columns significantly increases its “readability”.
For splitting the text into columns, css and a little javascript were used. The breakdown algorithm itself consists of only four steps:

Step 1.

We create a block for the text (in the example it is called “News”) and place into it two blocks in which our text will be located. All the text is in the first column.
Sorry for my French Photoshop, I did the illustrations on a quick hand, I think the meaning will be clear:

Step 2.

In the first step, we have driven the entire text into the first column, Col1. Now javascript'om copy all the text in the second column (in the illustrations, the text is specially made with a gradient so that in the future you can determine where its upper part and where the bottom):

')

Step 3.

All the same javascript'om determine the current height of the columns Col1 and Col2. The Col2 column is set to negative margin. Margin should be exactly half the height of the column. Thus, we raise the second column up, leaving only its lower half visible:

Step 4.

Set the total (yellow) block of text height equal to half the height of the column. The rest is cut off using the overflow: hidden property.


And see the result.

Instead of conclusion

A more difficult task is to insert an image or video into this text if it falls exactly in the middle of the text, or if its width exceeds the width of one column. Agree, it will be absurd to look a photo if half of it is located at the bottom of the first column, and the second half is at the top of the second.
I was not faced with the task of implementing such an option, but in theory this is also being solved. All images must have the position: absolute attribute, and inside the columns, using javascript, you will need to create empty elements with dimensions and coordinates exactly below the image with relative position (otherwise the text will be hidden under the images).