CODEWITHSUNDEEP
htmlcsscss-float
Mike
Mike

Reputation: 2735

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 words 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

Upvotes: 2

Views: 454

Answers (3)

Luc125
Luc125

Reputation: 5857

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.

Upvotes: 0

Jason Gennaro
Jason Gennaro

Reputation: 34855

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

Upvotes: 2

BeatShot
BeatShot

Reputation: 136

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;
}

Upvotes: 0

Related Questions