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 DIVs 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.