CODEWITHSUNDEEP
htmlcss
Googlebot
Googlebot

Reputation: 15683

How to flow text from a box to another with CSS

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.

Upvotes: 0

Views: 3163

Answers (1)

KatieK
KatieK

Reputation: 13863

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.

Upvotes: 5

Related Questions