CODEWITHSUNDEEP
csshtml
1.21 gigawatts
1.21 gigawatts

Reputation: 17770

Is it possible to have text flow from one container to another?

In traditional publications it's common to have text flow between multiple columns on a page.

Is it possible to do anything like this in HTML and CSS?

Is there anything where you can define columns and the text flows between them: 

<div columns="2">It was so beautiful out on the country, it was summer...</div>

And it creates something like this (pseudo code): 

#container {
  display:flex;
}
#column1, #column2 {
  flex: 1;
  text-align: justify;
  margin: 10px;
}
<div id="container">
<div id="column1">It was so beautiful out on the country, it was summer- the wheat fields were golden, the oats were green, and down among the green meadows the hay was stacked. There the stork minced about on his red legs, clacking away in Egyptian, which was the language his mother had taught him. Round about the field and meadow lands rose vast forests, in which deep lakes lay hidden. Yes, it was indeed lovely out there in the country.

In the midst of the sunshine there stood an old manor house that had a deep moat around it. From the walls</div>

<div id="column2"> of the manor right down to the water's edge great burdock leaves grew, and there were some so tall that little children could stand upright beneath the biggest of them. In this wilderness of leaves, which was as dense as the forests itself, a duck sat on her nest, hatching her ducklings. She was becoming somewhat weary, because sitting is such a dull business and scarcely anyone came to see her. The other ducks would much rather swim in the moat than waddle out and squat under the burdock leaf to gossip with her.</div></div>

Upvotes: 1

Views: 696

Answers (1)

Mr. Alien
Mr. Alien

Reputation: 157344

Yes, you can certainly use column-count in this case instead of a flex. For example:

div {
  column-count: 2;

  /* below properties are only for beautification purpose */  
  column-gap: 20px;
  text-align: justify;
  padding: 10px;
}
<div>
  It was so beautiful out on the country, it was summer- the wheat fields were golden, the oats were green, and down among the green meadows the hay was stacked. There the stork minced about on his red legs, clacking away in Egyptian, which was the language his mother had taught him. Round about the field and meadow lands rose vast forests, in which deep lakes lay hidden. 

  Yes, it was indeed lovely out there in the country. In the midst of the sunshine there stood an old manor house that had a deep moat around it. From the walls of the manor right down to the water's edge great burdock leaves grew, and there were some so tall that little children could stand upright beneath the biggest of them. In this wilderness of leaves, which was as dense as the forests itself, a duck sat on her nest, hatching her ducklings. She was becoming somewhat weary, because sitting is such a dull business and scarcely anyone came to see her. The other ducks would much rather swim in the moat than waddle out and squat under the burdock leaf to gossip with her.
</div>

You can tweak the column-count here for the number of columns you are expecting for.

If you are looking for a flex solution (I realized you've a similar one after I wrote this xD), you can try the below code. Here, am declaring the parent element which is div as flex and then, setting each of the p at 33.33% with flex-grow set to 1 which is more like, how much the element should grow, relative to the rest of the flex items. Still, this is more of a manual work than column-count so I would recommend you to go with the previous solution than this.

div {
  display: flex;
  flex-wrap: wrap;
}

div > p {
  flex-grow: 1;
  width: 33.33%;
  height: 100px;
  text-align: justify;
  margin: 10px;
}
<div>
  <p>
    It was so beautiful out on the country, it was summer- the wheat fields were golden, the oats were green, and down among the green meadows the hay was stacked. There the stork minced
  </p>
  <p>
     about on his red legs, clacking away in Egyptian, which was the language his mother had taught him. Round about the field and meadow lands rose vast forests, in which deep lakes lay hidden.
  </p>
</div>

Upvotes: 2

Related Questions