Home/ Questions/Q 7548239
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-30T09:38:53+00:00

Situation: I have two fixed-height divs, overflow set to hidden on both, and dynamic

  • 0

Situation: I have two fixed-height divs, overflow set to hidden on both, and dynamic text content within the first div. Should that content exceed the overflow boundaries of the first div, I would like for it to automatically spill into the second div.

My questions is simply how to do this? I’ve researched, and the closest thing I found was a JQuery plugin that automatically creates columns for a newspaper-like layout. While this is not exactly what I need, it does give me hope that this is achievable on a simpler level.

Visual Example:

  <html>
     <head>
       <style type="text/css">
          div{height:1in;width:4in;overflow:hidden}
        </style>
     </head>
    <body>
     <div id="d1">...(enough text to cause overflow exceeding 1in height)...</div>
     <div id="d2">...(the rest of the text that got cut off from the first div)...</div>
    </body>
   </html>

Thanks everyone! Based on all the input, I put this together. NOTE: this may not suit everyone’s purpose:

  1. I did it in JQuery
  2. This is very conceptual
  3. Each additional item it its own element, and not just open text
  4. I already know for my needs that a single div will not break the overflow limits

That being said:

HTML

<html>
<head>
<style type="text/css">
    #base{border:1px black solid;height:2in;width:3in;overflow:hidden;}
    #overflow{border:1px black solid;width:3in;}
    .content{width:2in}
</style>
<script type="text/javascript" src="ref/js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="work.js"></script>
</head>
<body>
<div id="base">
    <div id="sub"></div>
</div>
<br />
<div id="overflow">
</div>

JQ

$(document).ready(function(){

//  An array of content, loaded however you wish
var items=new Array();
items[0]='<div class="content" id="C0" style="border:1px blue solid;height:.75in">content 1</div>';
items[1]='<div class="content" id="C1" style="border:1px green solid;height:.75in">content 2</div>';
items[2]='<div class="content" id="C2" style="border:1px red solid;height:.75in">content 3</div>';
items[3]='<div class="content" id="C3" style="border:1px yellow solid;height:.75in">content 4</div>';
items[4]='<div class="content" id="C4" style="border:1px orange solid;height:.75in">content 5</div>';

//  Variable for the height of the parent div with the fixed width
var baseheight=$("#base").css('height').substring(0,$("#base").css('height').length-2);

//  Function to dynamically get the height of the child div within the fixed width div
function subheight(){return $("#sub").css('height').substring(0,$("#sub").css('height').length-2);}

// For each individual piece of content...
for(i=0;i<items.length;i++)
    {
    //  Add it to the child div
    $("#sub").append(items[i]);

    // Variable for the difference in height between the parent and child divs
    var diff=subheight()-baseheight;

    //  If this piece of content causes overflow...
    if(diff>0)
        {

        // Remove it...
        var tooMuch="#C"+i;$(tooMuch).remove();

        // And put it in the overflow div instead
        $("#overflow").append(items[i]);
        }
    }

});
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    this is sort of JS only.

    what you should do in JS:

    1. get the height of cont1
    2. when content is loaded to cont1, get the <p> height
    3. if <p>‘s height > cont1‘s height, remove text (and store it to a temporary variable) starting from the end of of the text in<p>‘s until it’s height is equal or lesser than cont1.
    4. the removed text (which was stored earlier) will be dumped into the second cont2. wrap the text in <p> so that if you plan to do this feat again, you have 2 containers to deal with again.

    not the most elegant of code (loop will lag when content is very long), but it’s worth a try

    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 jQuery
var 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 array
var p1text = p1.text();
p1text = p1text.split('');

//prepare p2 text
p2text = [];

//if greater height
while (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 container
p2.text(p2text.join(''));​
    • 0