How pasted text flows from a column to another?

Can text flow from a div tag to another automatically for beginner webmastr

[picophd]

Greetings,

I want to make a layout of a web page, where there are two columns (or more), for instance, and when, later on, anyone pastes text in the left column (first column), it automatically fills this fixed-height first column and flows into the right column (second or next column), which may or may not be of fixed height, depending on the amount of content (i.e., if the content is too much, another identical page will be used and accessed by a "next" button, if it is not too much, then a fixed height that can take all the remaining text can be assigned to the right/second column).

How can I code these two columns/divs and make them work correctly?

Can they be made with future users in mind, who want to update the text themselves, but have no knowledge of code whatsoever? Like, for instance, they can only use Macromedia Contribute?

Thanks for anyone taking the time to help and give tips.

[createErrorMsg]

it automatically fills this fixed-height first column and flows into the right column

Sorry to tell you, but to th ebest of my knowledge, this is not possible with CSS alone (you could probably script it with PHP, but that's a whole different bugbear). *

What you're describing is a layout that mirrors the sort of layout used in print media - newspapers and magazines that work within the confines of strict paper/space sizes. Because of the web's fluidity, the fact that your page size can (and should) expand to fit your content, this kind of layout is generally unecessary.

That doesn't mean that you might not WANT it to look that way, though. And unfortunately, CSS doesn't provide any means to make this happen.

* If your site uses a CMS, you could probably add some scripting that would detect the length of the content, clip it in half at a certain point, then output it as two different peices of content to two different boxes.

[photon]

Hi picophd, welcome to WebmasterWorld!

As cEM said, there's currently no widely supported CSS-only solution for column flow. CSS3 [w3.org] will offer a solution, but that's a long way off.

However there are ways using JavaScript and/or PHP. Take a look at some of the news stories at the International Herald Tribune [iht.com]. You can look at how they use JavaScript to create the column flow for their stories.

[picophd]

Ok, I understand what you said. I wasn't very sure that that is possible, so thanks for confirming.

However, can you give me a better suggestion? Basically, after reading what you said, I thought maybe I can make both columns of fixed height. But the problem is that if there's text to paste, then whoever is pasting that text cannot find out when it will break.

My imaginatin of what someone will have to do is: paste the whole text from the content document, look at the last word showing up in the left column in the preview of the html file in the browser, then go back to content document and highlight all the text until that word (he'd have to search for it first, too!), then go back to the coding program or WYSIWYG program and paste all that text in the left column, go back to the content document and highlight the remaining text, then paste it in the right (second) column, if it doesn't all fit, then repeat the whole process in a new page taken from the same template.

Does the process really have to be this tedious? Aren't there better ways of doing this?

Given that I want to stick to web standards and clean code?

[Longhaired Genius]

I often find webpages that try to copy print layout in this way very difficult to read, with gratuitous up-and-down scrolling required. I think it's much better to put content in one column, split over pages if necessary.

[picophd]

Maybe I didn't explain myself very well. The whole reason behind this layout is to not have a lot of scrolling, and to be friendly in a 800x600 res for instance, and finally, to not have very long lines to follow from left to right, but have short lines that are easy to scan downwards, like in a newspaper. It's a layout recommended in all typography books.

[jetboy_70]

It's a layout recommended in all typography books

Maybe for print, but you're working in a different medium here, and some things just don't translate.

You should think *very* carefully before you mess with established web conventions. In this instance, a single column for your main article text, vertical scrolling and multiple pages if the article becomes excessively long.

As a rule, multi-column newspaper-style layouts just aren't intuitive to use for the average surfer. You mention having more than two columns. Surely you're either going to end up with very narrow columns or horizontal scrolling? Neither result is going to be as intuitive to use as a vertically scrolling page.

One print convention that does translate is aiming for 9-12 words per line, although it can be argued that you should let the user choose the content width that they feel most comfortable with.

[picophd]

I see your point. I do admit it sounds unconventional compared to what it's been done on the web for so long now. I'll try to come up with a layout that can look nice and have one text column. However, when CSS3 becomes a recommendation, I guess many things are gonna change. I just checked that link about columns in CSS3, and it looks interesting.

[dcrombie]

Netscape 3 introduced the MULTICOL [utoronto.ca] tag but it was never adopted by other browsers.

It would only really be useful on pages with NO horizontal OR vertical scrolling.
That limits your content length - especially for low-res browsers.

[MichaelBluejay]

You mention having more than two columns. Surely you're either going to end up with very narrow columns or horizontal scrolling?

I disagree, and I'm with Picophd on this one. With current web tools we can choose between:

1. Lines that are too long, and therefore hard to read.
2. Lines that are shorter, and waste valuable screen space.

A solution, like Pico is searching for, would be:

3. Automatic muti-column layout.

That way the lines could be short enough and you wouldn't be wasting lots of space on the left and the right.

Two columns doesn't make the columns too short. Even on the smallest 640x480 monitors there's plenty of room for two columns. And these days most users have 800x600 or 1024x768.

Neither result is going to be as intuitive to use as a vertically scrolling page.

Depends on how it's designed. In any event, some of us might like to trade a slight amount of usability for a greater amount of readability. Probably most wouldn't choose that, but some of us would. The point is that that option isn't even available to us.

In any event, even though it's not available automatically, I've made multi-column layouts (for the same content) *manually*, with results that haven't been perfect, but good enough.

[picophd]

MichaelBluejay, thank you very much. It's refreshing to see people who think along the same lines. Indeed, I always had a feeling that there's plenty of space on any screen for two columns of text, without horizontal scrolling at all.

I believe all a developer has to do is just design one layer or div for the content, with margins of

margin: 1em 2em;

for instance, then nest two layers inside it, floated left and right, each with padding of 1em or so, and let everything else be auto or "fluid". This way, no matter what the resolution is, the page is going to use the maximum space available (a boon for people with weak eye-sight who usually make the text much bigger), and, at the same time, it will not create very long lines that make reading much slower and more tedious. And to be honest, even though Nielsen's useit page is very useable, it's not very nice to "read", because the lines are extremely long in a 1600x1200 and even longer than I'd like to in a 1024x768. Resolutions are getting bigger and bigger, and just like the 640x480 is almost dead, maybe the 800x600 will also die one day. At least 2 columns of text should be the ideal solution tomorrow, I believe.

Yes, I can "restore" my windows, or un-maximize them, so to speak, but for some reason, I hate doing that. I've seen many people who are able to work with un-maximized windows, and actually do that all the time, but I just never want to do this for some reason. So I end up usually forgetting to un-maximize and putting up with very long lines.

[createErrorMsg]

pico, bear in mind that noone in this thread has criticised the use of two columns in web design. What I, and a few others, have said, is that using two columns for one peice of content is counter-intuitive on the web. People simply don't bring their newspaper reading strategies with them onto the web. Instead, they use web reading strategies, which includes scrolling.

Two columns for two peices of content is fine, is indeed what most people assume is going on when two columns appear on the screen.

cEM

[Josefu]

It's perhaps a bit late for my two cents but I was just working on this problem today.

Although it is possible to split your text up into multiple nested and floating columns using PHP (without mention of the bugbear that any h2 title tags will cause you : ) but... CreateErrorMsg's input is about the final word on the subject. I just spent a couple hours making a nice magazine-ish layout (complete with pull-quotes and in-column images) but I had to conclude, in looking at the finished product, that I wasted my time.

If you have a page in front of you that continues uninterrupted without any visible break or hindrance below your field of vision your eye will follow the text down line by line because of the continuinity, yet when a column of text flows "below the fold" of a computer screen (which is also disorienting because the viewer is unable to tell far down the text goes) the eye's first reaction is to jump up (to reorient itself) to the block of text already visible in the next column over.

An informed (and faithful) reader may get the hang of it and develop the right "scroll reaction" - but most of a page visitors are "first-timers" - people who rarely have the patience to stick around if they don't see something 'to their liking' - meaning content understandable at first glance. This weakness can even be damning to some low-content sites.