A LIST Apart: For People Who Make Websites

No. 190

Discuss: Cross-Column Pull-Outs

Pages

 1 2 3 >  Last »

1 Nice!

Yet another extremely useful trick! Thanks!

posted at 07:31 am on December 21, 2004 by Joe

2 paragraph tag

“Use a span instead of a div. We are inside a paragraph, and a block level element (div) can not be a child of an inline element (< p >).” I’m pretty sure a < p > tag is actually block-level.

and although the effect is nice, it seems ungainly to have to “count characters in the second column” to make things line up correctly.

posted at 08:01 am on December 21, 2004 by Nick Franceschina

3 Font zoom hides content

When using text zoom on the example pages (in Firefox 1.0 and Safari 1.2.4) then repeatedly the images cover a portion of the text, meaning you are unable to read a line or two of text that is covered by the image.

This seems to hapeen most if you zoom down 2 levels from the default size, or if you zoom up by 1 or more level.

Does anyone else notice the same behaviour?

posted at 08:57 am on December 21, 2004 by Nic Rodgers

4 Already done ...

This has been available to Freeway users for a while now. Freeway is a web design app that employs Actions to extend its output, and my Text Flow Action has allowed Freeway users to flow HTML text around images and other irrecgular shapes without needing to type in code, count pixels or draw on graph paper. You draw a couple of guide lines on the Freeway page, apply the Action to a DIV (or layered) object, and that does it.

http://www.actionsworld.com

A series of test/demo pages is here – I used these to show Softpress what the Action could do before I released it:

http://www.actionsworld.com/textflow/

posted at 09:03 am on December 21, 2004 by Paul

5 Great for fixed width layouts...

Very cool, but now let’s see that with a liquid layout ;)

posted at 09:19 am on December 21, 2004 by John

6 Excellent Job!

Nicely done! Great attention to detail.

posted at 09:23 am on December 21, 2004 by Cory Condiff

7 re: Already Done

Paul, on the page to which you linked (actionsworld.com/textflow/), Freeway is using HTML table layouts to create staggered visual effects.

By contrast, this article is using CSS layout.

posted at 09:25 am on December 21, 2004 by apartness

8 What they said

I agree, very nice. I was trying to do something similar in terms of emulating print design techniques.

posted at 10:52 am on December 21, 2004 by Dante

9 3 columns, 2 pull-outs, 1 broken FireFox

The double column span in a three column layout doesn’t work well in FireFox1.0 on MacOSX, but I don’t see where it would ever be useful (specifically the two images in three columns example, not the method on the whole) so I don’t think it’s a big deal.

Kudos

posted at 11:47 am on December 21, 2004 by Michael

10 Avoid web text in columns

While I’m sure you’re all excited about this new thing, remember that text set across multiple columns is harder to read on the Web than a single-column layout. It requires the user to scroll up and down, which breaks their concentration.

posted at 12:46 pm on December 21, 2004 by Dominic

Pages

 1 2 3 >  Last »

Discussion Closed

New comments are not being accepted, but you are welcome to explore what people said before we closed the door.

Got something to say?

Discuss this article. We reserve the right to delete flames, trolls, and wood nymphs.

Create a new account or sign in below if you’d like to leave a comment.

Remember me

Forgot your password?

Subscribe to this article's comments: RSS (what’s this?)