How to flow text from a box to another with CSS

Question

I have several boxes in html as

<div class="parent">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

defined with css

.box{
width : 200px;
height : 300px;
display :  block;
float : left
}

Is there a way to provide a log text in the parent DIV and flow the text within child DIV s with CSS ? or it should be done with Javascript ?

Of course, it does not matter where to provide the text, I just want to flow the excess text to the next box.

Answer 1

Change your HTML to be a single element containing the content, such as:

<div class="parent">
  <div class="box"></div>
</div>

And then add these style specifications:

.box {
   -moz-column-count: 3;
   -webkit-column-count: 3;
   column-count: 3;
   height: 10em; /* Or whatever height is appropriate. */
}

For more information on CSS Columns, see http://css-tricks.com/snippets/css/multiple-columns/ or https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_multi-column_layouts#The_columns_shorthand .