Is there a way to get overflowing text to appear in a separate div?

March 10, 2009 8:27 PM

Is there a way to get overflowing text to appear in a separate div?

My aim is to create a website layout resembling a two-column newspaper story. Ideally I'd like to have two column divs with all the copy in the first (left column), which has a set height value. Any overflowing text would automatically be sent into the second div (right column).

Is there any way to do this, or to achieve the same result another way? Is there any reason I shouldn't do this?

I'm prepared to manually adjust the copy in the columns if there is no elegant solution, but I would prefer it if I could get my CMS template to handle these columns somehow. I'm resigned to the fact that I'll probably have to do it manually though, as I haven't seen any CMS-run sites with a dual or multi-column layout where the copy just flows from one column into the next.

posted by carnival of animals to computers & internet (7 comments total)

It's been done using Javascript (I think iht.com used to do this), but you can't do it in straight CSS using prevailing browser implementations.

This page shows the CSS3 layout tricks that will be available in the shining future, and how to fake it with javascript.
posted by adamrice at 8:37 PM on March 10, 2009 [4 favorites]

Thanks! So when CSS3 is rolled out, I can leave my CSS alone and just remove the reference to the javascript, right?

I remember now why I decided I couldn't create the columns manually: there's no reliable way to ensure that the last line in the left column will be justified.
posted by carnival of animals at 9:09 PM on March 10, 2009

These were the guys who I think gave the first example of column scripting. You might also want to checkout the other articles which were also much ahead of their time.

http://13thparallel.com/archive/column-script/
posted by bbyboi at 1:39 AM on March 11, 2009 [1 favorite]

Is there any reason I shouldn't do this?

Yes. It's an unnecessary translation of print design onto the screen, almost never implemented very well, and scrolling up and down and up and down to read something is annoying as all hell.

Seriously, if you want your website to look like a newspaper, why not just generate PDFs or something? It's just as annoying and less of a hack, and at least I get a "Zoom" tool when viewing in case my browser window isn't the size you're assuming it is.

For a particularly bad implementation of this, see the Montreal Mirror's Best of Montreal.
posted by oulipian at 3:01 AM on March 11, 2009 [1 favorite]

"So when CSS3 is rolled out, I can leave my CSS alone and just remove the reference to the javascript, right?"

Sadly, no. It'll take a while for css3 to be adopted by all of the major browsers, and you can almost certainly count on IE to screw it up. And even then, you have to bear in mind that most people will still have outdated browsers.

Aggravating, isn't it?

...yep... sure is.

The funny thing is, I just had this same thought last night. I saw a simple 2 column magazine layout with a blockquote dropped in the center, taking a small chunk of space from both columns. Simple, yet effective. To accomplish something like that on a website - especially on a blog? Even without the blockquote... Good frigging luck! (...sigh...)
posted by 2oh1 at 10:24 AM on March 11, 2009 [1 favorite]

Yes. It's an unnecessary translation of print design onto the screen, almost never implemented very well, and scrolling up and down and up and down to read something is annoying as all hell.

You definitely have a point. Though if I were to do this, I would keep the columns in rows of about 400px in height, interrupted by images or whitespace; so there shouldn't be a need to scroll up and down like in that heinous Montreal Mirror page.

The reason I was thinking about doing this is because I want to use as much of the 900px or so of de facto horizontal real estate on body content as possible, and for the body to be wide enough to accomodate more than the usual 400px or 500px images found on blogs. But a 700px space seems a bit too wide for a single column of text. Reading this very page for example is not exactly a chore, but copy with about 10 to 15 words per line (about what you'd find in a nicely set out novel I think) is definitely more comfortable to read.

That said, the other option is just to increase text size, which frankly wouldn't hurt usability. I'm currently using the em equivalent of 12px serif -- which I'll admit is part of the problem. If I take a hint from the NYT and the advice of web typography websites, it should probably be 14px.

Sadly, no. It'll take a while for css3 to be adopted by all of the major browsers, and you can almost certainly count on IE to screw it up. And even then, you have to bear in mind that most people will still have outdated browsers.

Definitely aggravating! But once most browsers become compliant some time in the future, the CSS which this JS hack allows you to use would be compatible right? (i.e. the script is basically letting you use proposed CSS3 code before it becomes the standard)
posted by carnival of animals at 7:33 PM on March 11, 2009

"once most browsers become compliant some time in the future, the CSS which this JS hack allows you to use would be compatible right?"

You realize you're talking about 2015 and beyond, right?

First there's the issue of how long it takes to get CSS3 adopted and implemented by all of the major browsers. And then, there's the issue of people with XP not feeling the need to upgrade since their browser works well enough for them, and people with OS X Jaguar or Tiger who don't see the need to upgrade either, for the same reason.

Here's a for instance. I created but never ended up using this site design because I couldn't get IE to correctly implement a pretty basic piece of CSS (position fixed). Load it in IE and then in Firefox and you'll see the difference. Google "position fixed" and you'll see that people have been grappling with that one in IE for yyyyeeeaaarrrrrsss. I'm talking 2007, 2004... 2002... 1999.... GAH!!! It's an old problem, but IE just refuses to get it right - which means you'd be crazy to count on IE to get CSS3 right any time in the next... decade?

Also, note the use of the CSS text-shadow class in that link above (I used it in linked text - see the left hand column). It works on my Mac in Firefox and Safari, but not on any PC browser that I've found... so I gave up.

...in other words...

Your best strategy is to design within the parameters of what works now, making sure it's backwards compatible with as many people as possible.

Best of luck!
posted by 2oh1 at 10:08 PM on March 11, 2009 [1 favorite]