0

So I'm trying to display a huge text like a book. The "pages" have a width and height. They are displayed over two columns (left and right). Page 1 is on the left, page 2 is on the right, page 3 on left, page 4 on right, and so on. Two columns repeated as many times as needed throughout the height of the webpage.

The code basically looks like this:

<div class="left">
<!-- Page 1 -->
<p>Text here</p>

<!-- Page 3 -->

<br /><p style="text-indent: 0px;"> Text of 3rd page (under page 1) here.</p>

</div>

<div class="right">
<!-- Page 2 -->
<p>Text of page 2 (style: float: right; - the page is displayed beside page 1 with a margin-left of few pixels). </p>

<!-- Page 4 -->
<br />

<p style="text-indent: 0px;">Text of page 4 goes here. Page for is displayed beside page 3. </p>
</div>

And the CSS simply displays the two columns one beside another (#right and #left). I guess you can see the logical behind it: at every page break, I just put the text in the matching to make it go on the corresponding side.

CSS code:

.left{


  font-size: 20px;
  float: left;
  margin-left: 20px;
  width: 500px;
  margin-right: 20px;
  text-align: justify;
  /*height: 680px;*/
  margin-bottom: 20px;
}

.right{


  font-size: 20px;
  margin-left: 10px;
  float: right;
  text-align: justify;
  height: 680px;

  width: 500px;

  margin-bottom: 20px;
}

My problem is I would like to make this automatic in order to use a WYSIWYG text form (Wordpress) and I would like to use a fixed height (I'm actually adapting the whole layout with lots of
and just my eyes to see if it looks lined up). I would like to make the text start from the left "page" (left column) and automatically switch to the right page (right column) once it has reached the height limit of the page. But then I want it to switch back to the left column again once it has reached the height limit of the right column (same height for both columns). I want this to go on back and fourth for all the text.

My bigest struggle to make this automatic is that I don't really know Javascript. I found this solution but it does not tell me how to make the text go back to the left column once it's on the right side.

I hope I was clear. If there's anything confusing feel free to let me know. I've worked on this the whole summer and I can't seem to find how to do it. Thanks in advance!

Community
  • 1
  • 1
user3527658
  • 21
  • 1

1 Answers1

0

You could get this done using the CSS3 columns property, although it isn't the best cross browser solution.

Another option would be using a jQuery plugin such as http://welcome.totheinter.net/columnizer-jquery-plugin/

Bobadevv
  • 366
  • 1
  • 8
  • But this doesn't tell me how to go back to the left column once text has reached the right one. Do I have to make a loop in javascript with that? – user3527658 Aug 19 '14 at 16:15
  • Have you looked at example 10 on the link I posted is that what you are trying to do? – Bobadevv Aug 19 '14 at 16:48
  • Okay so I tried it and it does work. Now the only problem I have is that this code puts the columnized text right before

    and therefore I can't put my footer at the very end of the page. Do you know how I could fix this?

     – user3527658 Aug 31 '14 at 15:24