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”.
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
Photoshop, I did the illustrations on a quick hand, I think the meaning will be clear:
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
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.