There are two divs. I insert texts when div 1 is overflowed, the text should be in the next div (i.e in div 2). How do I do it in HTML/JS/CSS/jQuery?

Jesse's answer illustrates the difficulty of trying to do this - unless your website is fixed width/height and your content length is fixed then it's like to break your layout or at least be very impractical to maintain. There is a very simple CSS solution: CSS Regions. The downside? Very limited browser support because the spec is still in flux (and has been for years). .source {     -webkit-flow-into: mycontent;     -ms-flow-into: mycontent; } .target {     -webkit-flow-from: mycontent;     -ms-flow-from: mycontent; } Tutorial here: http://css-tricks.com/content-folding/ Browser support: http://caniuse.com/css-regions For now I would strongly recommend not doing what you're trying to do and instead finding a way to design your layout or chunk your content differently.

First you would need to get the height of the content and compare it to the height of the container. You can achieve that by using this: $('#height').html($( "p" ).height()); Or put it in a variable: var height = $( "p" ).height(); $('#height').html(height); That will display the height of the P tag in a div with an ID of height. Since it's coming from a database, what you can do is put the content into a variable. Then split the variable: var result = // your database query result ; var text = result.split(' '); Then have a loop that uses append to start to rebuild the string. Something like: var i = 0; while(height < containerHeight){ $('#div1').append(' ' + text[i]); i++; } So you'd probably want to count the result to begin with, store it in a variable, and keep track of that upon every iteration of the loop as well. var countArray = result.count(); Then start your new loop where the first one left off and repeat, only append the text to #div2: Make sense?

HTML: <div id="cont1">     <p>long text here</p> </div> <div id="cont2">     <p><!-- future content --></p> </div> CSS: #cont1{    height:100px;    background:red;    margin-bottom:10px;    padding:10px;}#cont2{    height:100px;    background:blue;    margin-bottom:10px;    padding:10px;} ​ JS: //existing text must be rendered in the first container so we know how high it is compared to the div//get references to avoid overhead in jQueryvar cont1 = $('#cont1');var cont1Height = cont1.height();var p1 = $('#cont1 p');var p1Height = p1.height();var p2 = $('#cont2 p');//get text and explode it as an arrayvar p1text = p1.text();p1text = p1text.split('');//prepare p2 textp2text = [];//if greater heightwhile (p1Height > cont1Height) {    //remove last character    lastChar = p1text.pop();    //prepend to p2 text    p2text.unshift(lastChar);    //reassemble p1 text    p1temp = p1text.join('');    //place back to p1    p1.text(p1temp);    //re-evaluate height    p1Height = p1.height();    //loop}//if less than, assemble p2 text and render to p2 containerp2.text(p2text.join(''));​

Thanks for the A2A. If the div has fixed width and height, count the max characters it can hold by entering random data. Once you have that count, split your text source according to that count and fix the remaining into the other div. In PHP it would be something like this, assuming '$textdata' holds your text and $maxlen holds max number of characters div1 can hold . $len=strlen($textdata); <div id="1"><?php echo substr($textdata,0,$maxlen-1); ?></div> <div id="2"><?php echo substr($textdata,$maxlen,$len);</div> Edit: The above solution is not precise because very few fonts are monospaced- Other way round - You can do this if it were some text continually entered by some user.  Detect the overflow of your DIV1 with following javascript and on its trigger, start filling the DIV2 with the succeeding text. You can  trigger an overflow by comparing scrollHeight with clientHeight, try the following: <script type="text/javascript"> function GetContainerSize () { var container = document.getElementById ("tempDiv");     var message = "The width of the contents with padding: " + container.scrollWidth + "px.\n"; message += "The height of the contents with padding: " + container.scrollHeight + "px.\n"; alert (message); } </script> Ps: Such questions belongs to Stack Overflow by the way.

Split your text string in equal pieces.. for example: split your text after every 250 character.. and append each piece to a new div..

is it client content? or dynamic content from server side?