Splitting Content Between Divs Based On Length

I have the following layout styled to appear as a sheet of printed paper on a writing desk:

[stuff]

Solution 1:

If that is the case, the viable option maybe be keep track of the height of the div while data in HTML is being appended.

<div class="content"id="content_1">

Use an id for each page like content_1, content_2. And use jquery like :

$("#content_1").append("some text"); 
if($("#content_1").height() >= 1000) {
    $("#content_1").parent().append('<div class="content" id="content_2"></div>');
}

Do this in a loop like

index = 0;
$("#content_" + index)

Solution 2:

As stated above, you could use the CSS3 column properties. Here's a quick and dirty jsFiddle to get you started, code below:

CSS

.content {
    -moz-column-count: 3; 
    -moz-column-width: 100px; 
    -webkit-column-width: 100px;
    -moz-column-gap: 20px; 
    -webkit-column-count: 3; 
    -webkit-column-gap: 20px; 
    height: 1000px;
    margin: 25px;
}​

HTML

<divclass="header"><strong>HEADER STUFF</strong></div><divclass="content">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris id libero est. Integer porttitor consectetur adipiscing. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec id ipsum non tortor dapibus imperdiet quis in lacus. Aliquam erat volutpat. Pellentesque malesuada arcu at magna suscipit condimentum. Integer congue pretium nunc at pretium. Vestibulum vel turpis in turpis gravida pretium. 
</div><divclass="footer"><strong>FOOTER STUFF</strong></div>​

You would then have to have your background image of paper (assuming that's what you're using) either repeat 3 times across (or however many pieces of paper you want) or just have 3 pieces of paper in one image file, spaced how you want it to.

Share