Making a chain of p's flow into a "two-page spread"

Question

Recently a student got this quite by accident (or well, a side effect of incorrect xhtml/css). Is this possible to do in a cross-browser, automatic way with say a Wordpress article and custom html/css? (I.e., no php script or such.)

It's been a goal for me to at one point make a site that reads "like a book" rather than a scroll.

Ideas?

Edit: I should make the goal clear. It is to write a text with pictures using f.ex. TinyMCE or the like, and present it with typography and layout quality and 'overviewability' of classic technical magazines such as the early BYTE spreads, or science folios. I'll accept a php solution if no CSS trick will handle the overflow automatically. What I want to 'get rid of' is the need to manually chop up the say 5-page article into columns.

Perhaps LyX can generate out decent HTML with 1 file per 2-page spread? That would be an acceptable solution.

Answer 1

If you use something like this:

<p>text1</p>
<p>text2</p>
<p>text3</p>
<p>text4</p>

And give the following style:

p { float: left; }

It should place each P side by side. However, how many P's go side by side depends on how much width is available, so if you define that each P take, say 200px, and the total width in the container is 400px, the end result would be two P's side by side, something like this:

text1 text2
text3 text4

Do note that this will not look so good (or work so well) if the contents of the P's aren't about the same length. I don't think there's a neat way of doing it just with CSS if you need the sizes to automatically split into such columns as well.

As a side note, I've seen some sites which do this. It's not really a that good idea. It works on paper and magazines, but not so well on screen in my experience. Unless I'm mistaken, there have also been some studies about this coming to the same conclusion.

Answer 2

You can create two left-floated, 50%-wide divs and distribute the content equally among them. Here is a somewhat automated approach that uses jQuery:

http://jsfiddle.net/2VEtG/2/

It does not address the issue of "equally" dividing the content.

Answer 3

As Jani says I'm not sure 2 column layout works very well in web, because of the way people generally read on the web. I would personally not recommend a 2 column layout for articles like that for a web site.

Also I am not sure there is anyway you could create that without using dynamic scripting, unless you dictate the amount of copy for each section, otherwise it would be spectacularly easy for the user to give miss matched columns.

Answer 4

CSS 3 allows flowing "newspaper columns" if that is what you mean.

http://www.w3.org/TR/css3-multicol/

Most current At least Gecko and Webkit based browsers support it, but may require vendor-specific prefixes:

http://www.css3.info/preview/multi-column-layout/