Cross-Column Pull-Outs

by Daniel M. Frommelt

64 Reader Comments

Back to the Article
  1. This is incredible. The only problem I see, is that it’s difficult to read in the (2-3) column layout.

    Copy & paste the code below to embed this comment.
  2. another already done

    only using a , <span> and <object>or<img> tag

    Copy & paste the code below to embed this comment.
  3. Looking at the samples provided with the article, everything is fine but those columns are too close for confortable reading (at least in IE6)!

    Still, there is a lot of value in the proposed methods. Will try to figure out the ins and outs and adapt it to my site.

    Copy & paste the code below to embed this comment.
  4. I am not so sure about the effectiveness of columns in web pages. For the user, scrolling up and down simply for the novelty of a page that reads like a newspaper is a pain. Columns require scrolling up and down for reading, if you see the content through a window. While you may be able to fit the content into a visible area, the window may be resized by the user, or viewed in a small screen. (shrinking font size with the window/screen? the feller’s gonna ask for glasses when he’s through!)

    Copy & paste the code below to embed this comment.
  5. Having read the comments which followed my original comment about the poor usability of multi-column text layouts on the Web, here’s a few final thoughts.

    1. Someone said to use this for a print version rather than an on-screen version. On the face of it, this sounds like a great idea. When reading from paper, narrow column widths are easier on the eye. Which is why newspapers use them. 300 years of convention for this. If the intention is to give the user something that will be easier to read when they print it out, then flowing text in columns is good.

    However, many users of online newspapers and zines will switch to the printer-friendly view when they want to read an item which is broken up across several pages. In this case, a multi-column print version would be extremely frustrating because these folks want to read online, not print out the item.

    2. Someone said you can use this technique for   non-text multi-column layouts. Yes, as long as the text you want people to read is in one column, no reason you can’t use this technique to design interesting pages.

    3. Someone said that newspapers can and do use multi-column layouts for text. They can, but mostly don’t because they have learned that it doesn’t work. Many papers and magazines started with multi-column layouts in their Web versions, but gave up on them due to feedback from users. As for the online International Herald Tribune, designed in France, they started with a multi-column layout, then had to add the option for users to switch to single-column views. They still have a multi-column layout as their default, but it’s done as an ego/branding thing, not because it is better for users.

    So, this technique has very limited value.

    Copy & paste the code below to embed this comment.
  6. I agree with a lot of comments in terms of how usefull this is for display on screen.

    However I implemented this in a print stylesheet (as someone else mentioned) and it is brilliant.  I can take my long one column web layout (with inline pictures) and translate it into a much friendlier version for print. 

    Previously my print version was simply one long column resulting in two printed pages.  It is now side by side columns with my image or quote in between – resulting in one page.

    Excellent work.  Thank you!

    Copy & paste the code below to embed this comment.
  7. I think Mr Ryan has found the online niche for this print-technique: the print stylesheet.

    Copy & paste the code below to embed this comment.
  8. Re: Patrick Ryan

    I wasn’t able to find the effect you mentioned anywhere on your site. Were you able to pepper your markup with the necessary ‘column divs’ and then have the print-stylesheet introduce the necessary float behaviour? Or are we back in old-school Printer-Friendly-Version territory here?

    Ultimately, neither solution is all that great, since as soon as you size up the font, you’ll have the bottom three lines of every column poking their nose onto the next page.

    Before this becomes a genuinely useful technique, we’re going to need to see some very careful CSS3 additions—ones that downgrade to a simple single column flow in legacy browsers like IE6 and Firefox 1.0, but that also look better in whatever’s the newest thing out there.

    Ultimately, however, as mentioned above, I’d like to see a lot more CSS for dealing with paged layouts. I’d like to bypass Powerpoint completely, give an xHTML presentation from my laptop, post it online afterwards, and print out a reasonable document to hand out. But without sacrificing any features of the three individual formats. (ie, columns in the paged version)

    Copy & paste the code below to embed this comment.
  9. This is a very crafty and imaginative technique, but its reliance on aligning two columns of text poses a risk to readability. Many people view the web with text larger than default, and at certain levels of magnification this example cloaks text with text, rendering the copy illegible.

    While I do not wish to offend the author with a negative comment post, I do feel it’s fair to make note of this potential pitfall. This isn’t about semantic code (albeit important to me), but rather about accessibility.

    Your technique is absolutely appreciated, though, Mr. Frommelt. This is one of the few areas where print designers have it easier than web designers, and we would do best to find a viable means to the end result.

    Copy & paste the code below to embed this comment.
  10. Having to count characters to make this effect work is horribly unmanageable.  CSS wasn’t specifically designed to recreate everything print can do; some things should be left to print.  Hopefully CSS3, with its automagic column mechanism (which Mozilla already supports), will give us something more logical to accomplish this, like float:center.

    Copy & paste the code below to embed this comment.
  11. I’m looking at example 4 and 5 on a Windows XP machine with a standard install (for compatability testing) and both examples have the pull-outs overlapping the column text.

    Copy & paste the code below to embed this comment.
  12. This is an amazing trick, it’s very well thought. Good job!

    Copy & paste the code below to embed this comment.
  13. Surely this helps wrap text around picture centered between two columns in a nicer way.

    Copy & paste the code below to embed this comment.
  14. Having multiple columns can be usefull in many situations, for example, say you have two authors and want to highlite both of their achivements, or like Jakob Neilson’s you want to seperate two things.

    And want an image in the middle.

    Copy & paste the code below to embed this comment.