2 div elements with automatic text break

Is there any way to have 2 Div Elements side by side, let's say both width: 200px, height: 200px and float:left, to have an some sort of an "automated" page break between the divs without using PHP (to count the wo开发者_运维技巧rds i.e.)?

The reason I am asking is that I have a very long dynamic text. And I would like to stretch it over 2 div's, prefered over css.

Mike

---

If you want text to carry over between two divs (which I think is what you want?), then you could use CSS columns

div#columns {
    column-count:2;
    column-gap:20px;
    -moz-column-count:2;
    -moz-column-gap:20px;
    -webkit-column-count:2;
    -webkit-column-gap:20px;
}

Example: http://jsfiddle.net/jasongennaro/74ZrZ/

More info: https://developer.mozilla.org/en/CSS3_Columns

---

As I understand you wish to put your long texts in columns? Using two divs for the same text source is not that easy and definitely requires JavaScript (or jQuery to be precise.)

However, the method you might be looking for is CSS based columns.

.two_columns {
    -moz-column-count: 2;
    -moz-column-gap: 10px;
    -webkit-column-count: 2;
    -webkit-column-gap: 10px;
    column-count: 2;
    column-gap: 10px;
}

---

When the text in a div overflows, with CSS you can allow a scrollbar to appear (using, for exmple, overflow-y: auto if you want a vertical scrollbar), but you cannot specify another element to "transfer" the supplementary text to.

This could be done with JavaScript however, by testing if the div's content overflows after adding text to it, and then moving some text to your other div. But I would prefer simply allowing the user to scroll.