Cross-Column Pull-Outs

by Daniel M. Frommelt

64 Reader Comments

Back to the Article
  1. The merits of using this technique for on-screen display can (and should) be debated. However, has anyone considered using this in a print stylesheet? That would seem to be a natural place to use this, in my mind.

    Copy & paste the code below to embed this comment.
  2. In Mozilla 1.7.2 it looks fine, but in IE5/Win i see no borders and with Opera 7.6 i cannot see the middle text in

    Copy & paste the code below to embed this comment.
  3. While it can be useful in some cases, wrapping text around non-rectangular pictures with semantic markup would be a lot cooler. Paul’s not-so-semantic solution ( gives you more artistic freedom. An article on how to do freeform wrapping would be a popular one I bet.

    Copy & paste the code below to embed this comment.
  4. I played around with this technique a while ago. I was really geeked that I got it to work: And I have to agree with some of the other people here; I really don’t see much of a use for it on the Web. I used to manage a newspaper Web site for my college and there were times when it would have been handy, but most pictures have cutlines to go with them.  Once you add text into the mix, the height becomes too variable if you’re not working with em-based layout widths.

    Still glad to see you guys cover it here. Somebody, somewhere WILL find a use for it, if I’ve learned one thing about Web design.

    Copy & paste the code below to embed this comment.
  5. Actually, I can think of a couple of practical uses for this technique right now, particularly as a ‘call-out’ type technique.

    Let’s say you don’t have 2 identical columns of solid text, but rather, one large column of main body copy and a smaller column to either the left or right that may or may not have text/or content in it. Let’s say you’d like to float a ‘call-out’ that contains whatever you want, in my case I was thinking of links to popular or related content that is positioned over and into each column and has the content of both flow around it? Wouldn’t this technique work for something like that?

    I think I may give this some experimentation.

    Thanks to both Mr. Frommelt and Mr. Sheppard for formulating another interesting and useful tool for designers to use!

    Copy & paste the code below to embed this comment.
  6. Just a thought really. Would it not be possible to create the columns as divs with fixed or percentage widths. Then use a transparent image floated either left or right (in the right position within the text columns) to force the text to go around it where you want the image to span. This would create your effect for the text spacing, but at this stage the area to hold the image would be just blank.

    Then, you could relitivly position the image in a div (using z index) so that its really sitting in the space occupied by transparent images.

    Of course, if the page was a fixed size and you could be certain of the amount of text, you could simply add an absolutely positioned div. But then what happens with text resize.

    Would that not be less code, standards compliant and work in all modern browsers, or am I being stupid and making it too simplistic ?
    Overall I would like to see some further investigation please on different options as I like columns of text in web pages, just like newspapers but always struggle when allowing for text flow when the browser is resized

    Copy & paste the code below to embed this comment.
  7. Great article – thanks.

    Copy & paste the code below to embed this comment.
  8. First of all, I write and speak a poor english, but I hope I can read and recognize an excellent idea. I’m a newbie in what concerns CSS and XHTML. My own site is full of tables and I try to learn. So you said that you will soon talk about   “Cross-Column Pull-Out Part Two: Custom Silhouettes.”.
    Magnífico !-)

    Copy & paste the code below to embed this comment.
  9. This is a great topic and thanks for the article.

    I have to admit that this is way to difficult using the current toolset.  However, if the semantics of the current flow model were slightly modified, it would become extremely simplified.

    The issue is that the current flow model one works horizontally, i.e., ltr or rtl.  In the case of direction:ltr, this really implies the flow of content is from left-to-right, top-to-bottom, as determined by overflow and wrap properties. 

    If the model was extended to allow for the CSS direction property to define top/bottom aspects of flow, then this problem would solved. To do this, there is needed additional values for direction to include: ttbltr, ttbrtl meaning Top to Bottom Left to Right, Top to Bottom Right to Left, respectively.  The inverse of these may also be valid, but semantically, where is the bottom of the body block?  I would advise staying away from that.

    Back on point.  Today, inline objects flow into lines that wrap at the boundary of the containing block.  The inline objects can be characters, inline-blocks, etc.  My site is an example of how this is done. 

    In an enhanced model, a containing block could be defined to flow from ttbltr, i.e., top to bottom, right to left.  The containing block would flow objects, not just glyphs, into the contained area using existing semantics for lines, margins, padding, etc. simply rotated to conform to the writing direction.

    I realize this does not conform to the CSS3 model, but it would be great to have.

    Copy & paste the code below to embed this comment.
  10. <style type=“text/css”>
    .newspaper {
      /* alter the flow model */
      /* now, content flows into the block
      from the top left corner, down the left
      edge until hitting the bottom edge of
      bounding box.  Depending on the whitespace
      and overflow properties, content would
      flow into the next line down, i.e., the
      top edge of the next “column” to the
      right. */

      /* define the “column” width */
      /* given that the box is turned 90 degrees
      from normal, the lines are now 90 degrees
      off also.  Here is the leap: Lines now
      serve as columns for this block.  Content
      flows into the vertical lines just as it
      would in any other flow model. */

    .newspaper * {
      /* Make the output readable */
      /* While it is important that the this
      object flows into the containing block
      like newspaper copy, it is also important
      that the content of this element be
      presented in a manner readable by the
      viewer.  In this case, we use the direction
      property to revert presentation to
      the expected ltr, as needed for English.

    Copy & paste the code below to embed this comment.
  11. 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.
  12. another already done

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

    Copy & paste the code below to embed this comment.
  13. 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.
  14. 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.
  15. 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.
  16. 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.
  17. 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.
  18. 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.
  19. 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.
  20. 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.
  21. 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.
  22. This is an amazing trick, it’s very well thought. Good job!

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

    Copy & paste the code below to embed this comment.
  24. 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.