Continuing overflowed text in a different div?

Question

What I am trying to do is create a site that displays my rants in faux letter form.

I want the "paper size" (div size) to be fixed, and the text to continue on the second piece of paper (a second div) displayed just below the first paper like this..

I apologize, being a new user, I am not allowed to post the screenshots I have created to help explain my situation, so am forced to link until I have enough reputation points:

http://img16.imageshack.us/img16/5538/pagesuc.jpg

ONLY FOR THE SAKE OF SIMPLICITY: I've created a simple html/css page to demonstrate in the simplest form what I am trying to accomplish with the code:

<style type="text/css">
* {
    margin: 0;
    padding: 0;
    border: 0;
}
.container {
    background: #FFFFFF;
    width: 600px;
    height: 400px;
    margin: 0 auto;
}
#lbox {
    background: #F00;
    width: 300px;
    height: 400px;
    float: left;
}
#rbox {
    background: #00F;
    width: 300px;
    height: 400px;
    float: right;
}
.flowcontent {
    padding: 10px 50px;
}
</style>

<div class="container">
  <div id="lbox">
    <div class="flowcontent">
      <p>Lorem Ipsum...</p>
    </div>
  </div>
  <div id="rbox">
    <div class="flowcontent"> </div>
  </div>
</div>

Screenshot:

I apologize, being a new user, I am not allowed to post the screenshots I have created to help explain my situation, so am forced to link until I have enough reputation points:

http://img689.imageshack.us/img689/7853/overflowc.jpg

In this case I would like the overflow from the red div to continue in the blue div on the right.

I realise this may not be possible with HTML/CSS alone, but was hoping maybe CSS3 might have some new tricks for this, as it has more advanced column handling.. If that's a no go, does anyone have a suggestion for a logical way to go about breaking this up using PHP or even JavaScript or JQuery?

I know PHP, but am still a JS/JQ newb so I have provided some (hopefully) very simple example code for anyone to plug in their own JS/PHP examples.

Anyway, thanks for your time.

Answer 1

I came up with a small JS Script that might help you out. It's far from perfect, but might give you a decent starting point. Essentially, it loops through your large text and looks for a scrollbar to appear. You may need to alter the calculations just a bit.

JSFiddle http://jsfiddle.net/Tt9sw/2/

JS

var currentCol = $('.col:first');
var text = currentCol.text();
currentCol.text('');
var wordArray=text.split(' ');

$.fn.hasOverflow = function() {
   var div= document.getElementById($(this).attr('id')); 
   return div.scrollHeight>div.clientHeight;
};

for(var x=0; x<wordArray.length; x++){
    var word= wordArray[x];
    currentCol.append(word+' ');
    if (currentCol.hasOverflow()){
        currentCol = currentCol.next('.col');
    }
}

HTML

<div class="col" id="col1">Lorem Ipsum ....... LONG TEXT .......</div>
<div class="col" id="col2"></div>
<div class="col" id="col3"></div>
<div class="col" id="col4"></div>
<div class="col" id="col5"></div>

CSS

.col{
   width:200px;
   float:left;
   height:200px;
   border:1px solid #999;
   overflow:auto;
   font-family:tahoma;
   font-size:9pt;
}

UPDATE

For this example, you must include the jQuery Libray in your scripts.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"  type="text/javascript"></script>

PS - if you get to know jQuery, you will start to use it for everything. It greatly increases cross-browser compatibility and simplifies many common tasks.

Answer 2

What you want is CSS Regions module proposed by Adobe and currently supported by zero browsers. Adobe did release a very rough webkit-based browser for playing with the spec if you're really interested. But as others have said, right now you're SOL and will need to find another solution.

• http://www.adobe.com/devnet/html5/articles/css3-regions.html
• http://labs.adobe.com/technologies/cssregions/
• http://dev.w3.org/csswg/css3-regions/

Answer 3

CSS3 has Multi-column Layout Module. However, I doubt it is widely supported to the moment.

Test it on your target browsers: http://www.quirksmode.org/css/multicolumn.html

Answer 4

Shapes by Adobe does exactly that, however, it has a very limited browser support.

IE: 11+

Chrome: 37+

FireFox: 32+

Answer 5

You cannot do this with HTML and CSS only. CSS is targeted primarily at web browsers, and the layout model is that of a document on a vertically expanding surface. You can make boxes auto-height (which is the default), or fixed-height, but you cannot change the way content belongs to a parent box (which is what you would need for this to work).

A few options you could consider, if this is really important to you:

• Use the paged-media features that are built into CSS to provide nice paging when rendered onto paged media (such as printouts); I'm talking about properties like page-break-after, page-break-before, etc. You won't get pages in a web browser, but at least you can control how it prints on physical paper
• Write some incredible clever javascript that partitions your content into pages. There's a bit of a vicious circle here, because you won't know if your content fits until you try, so you may have to reflow several times in trial-and-error fashion. If your content has a special structure you can take advantage of, e.g. a poem form, where all line breaks are explicit, or if you use a fixed-width font, then a one-pass algorithm is possible, and you may even be able to do it server-side, using PHP, ASP.NET, or any other server-side scripting technology.
• Use a different document format that gives you control over pages and absolute placement of elements within a page structure, e.g. PDF. (I wouldn't recommend using PDF for general web documents though; from a user's perspective, PDFs aren't convenient at all).
• Use something like Flash or Silverlight to produce the desired layout. This, too, is something you should avoid unless there are other reasons why you'd be using it anyway; also, the formatting algorithm suffers from the same problems as a javascript implementation would, except that you have more control over the rendering part (fonts, kerning, etc.).

For most things on the web, however, I'd just let go of the idea and go with a more realizable design.

Answer 6

If you know how many characters one of your pages hold you can separate your string dynamically using javascript or php and then print the first part of the array in the first "paper sheet" and the second on the second.

You won't be able to do that with just HTML/CSS

Answer 7

You can use column-count and column-gap css property for .container and then have two divs .column inside the container to automatically move the overflowed text to another div.

.container {
  column-count: 2; /* You can adjust this value to create more columns if needed */
  column-gap: 20px; /* Optional: Specify the gap between columns */
}

.column {
  /* Optional: Add styles to the columns if needed, e.g., padding, margin, etc. */
}

<div class="container">
  <div class="column">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris venenatis vulputate elit, ac fringilla magna malesuada eu. Etiam et mauris sapien. Aliquam luctus non leo molestie hendrerit. Pellentesque viverra nunc nulla, ut rhoncus nulla imperdiet vitae. Sed viverra consectetur est. Vivamus imperdiet lacinia ex. Vivamus imperdiet tempor felis, sit amet semper quam lobortis ac. Aenean at sagittis libero. Nam vulputate mi quis tortor luctus, ut porta neque laoreet. Vivamus augue felis, varius consectetur iaculis et, euismod eu lacus. In nisi justo, pharetra non orci sit amet, fringilla fringilla ligula. Duis ut erat lorem. Phasellus sit amet felis sagittis, congue quam a, vulputate nibh.

Nullam a felis ultricies, consectetur mauris ac, convallis sem. In sit amet augue ac tortor euismod finibus. Nulla ultrices turpis vitae diam elementum, a varius lorem sodales. In eros tellus, congue in neque et, semper placerat metus. Donec ligula sem, congue eget egestas sed, lacinia nec justo. Nullam efficitur tellus a metus dictum sagittis. Etiam feugiat scelerisque scelerisque. Sed sit amet tellus et enim varius bibendum eu tincidunt risus. In consectetur ut tellus a dapibus. Suspendisse lobortis, tortor sed venenatis hendrerit, enim est ornare eros, non lobortis justo dui sed nunc. Nullam sit amet fermentum sem, eu accumsan nibh. Sed non risus nulla. Suspendisse rutrum risus mi. Nulla interdum, velit a vehicula malesuada, eros ex bibendum ante, sed mattis metus est vitae leo.
  </div>
  <div class="column">
    <!-- The overflowed text from the previous div will continue here -->
  </div>
</div>

Works with every latest browser Can I use: Support Table