Content Folding

Less than a year ago, Trent Walton published Content Choreography in which he lamented at some of the difficulties and limitations of responsive layouts.

At times, it seems as though all of the site architecture & planning goes out the window as content reflows.

You have to admit, an awful lot of responsive designs end up being:

Squeeze everything into one column

Push the sidebar(s) to the bottom

*cough* this site does that *cough*

Trent mentioned it may be a more appropriate approach to "interdigitate" content.

Interdigitate

That is, to fold bits of content together into that single column in a more thoughtful or useful manner.

A Practical Example: Ad Folding

Consider a layout at a large browser window size. Two columns. Articles in a wide column on the left, advertisements in a narrow column on the right.

At narrower browser window sizes we've decided to drop down to a single column. This layout is probably done with floats, the most common layout method still today. Unfortunately that probably means setting both columns to 100% wide and letting their source-order determine which is on top. Meaning: push all the ads to the bottom. Probably not ideal. It likely would be nicer to fold the ads into the content.

But how?

There's probably a number of ways to do this. With JavaScript, you could measure the window width and shuffle things around in the DOM. That seems heavy to me, but the browser support would be good. I'd rather lean on CSS for this kind of thing. That's what CSS is (supposed to be) for. The grid layout may hold some possibilities for us, but for this tutorial, let's use the hot-off-the-presses CSS Regions, a contribution by Adobe.

Fair warning: This stuff is super new and subject to change. When I wrote this in March 2012, this demo worked in Chrome. Now in January 2013, it doesn't anymore. Chrome 15-18 had partial support and then it was pulled in 19, although Chrome still reports support of the property.

Notice the "content" (our ads) are tucked into a <div> at the bottom of the page. Once we set up the CSS regions, the element will essentially be hidden and the content inside it will flow into the regions we tell it to.

CSS

We kick it off by telling our content-holding div#ad-source to flow it's content into a "named flow":

#ad-source {
-webkit-flow-into: ads;
-ms-flow-into: ads;
}

I'm only using two vendor prefixes here because that's the only support for now. I'd recommend not using the unprefixed version as this stuff could change in final implementation.

'ads' is an arbitrary name that we just made up. It could be anything, like naming a CSS animation.

Now we set up regions in which for that content to flow. First, into the aside, then into the interdigitated divs between the articles.

Semantics

Soooo yeah, we have some empty elements we're tossing around here. Not super semantic. I'm not sure what this does for accessibility either. I do know that the DOM doesn't change around. All the content, despite where it "flows", is still within the "source" (the element with the flow-into property).

Here's the thing though: regions are layout style agnostic. We're still using floats for layout in this example, but the layout style you use doen't really matter. Regions paired up with the CSS Grids might be much more powerful and more semantic (I just don't know).

Browser Support

CSS Regions is shipping in Chrome 16 through 20, then put under the flag "Enable CSS Regions" in 21-22, and now under the flag "Enable experimental WebKit features" in Chrome 23+. It works in Safari 5.2 (available as dev, or WebKit Nightly). Supposedly it works in IE 10, but I couldn't get it to.

Demo & Download

Also note that at some fairly wide browser window widths, the ads in the aside get cut off. I'm leaving it that way to illustrate how regions don't expand in height naturally, you need to account for that yourself.

Update: This demo worked, then was broken, and now works again. I made it work through Adobe's CSS Regions Polyfill. This will need to be revisited again when the spec and browser support settles down.

Browser Detection

This HTML and CSS as is would be pretty sucky in a browser that didn't support CSS regions. There would be this chunk of ads at the bottom of the page randomly. Instead I chucked in a bit of JavaScript (based on this) to test for it and apply classes to the html element reflecting support.

Restart your browser by clicking the "Relaunch Now" button on the lower left corner.

If you wanted to add this test to Modernizr you'd do:

Modernizr.addTest('regions', Modernizr.testAllProps('flow-into'));

Hopefully they'll add that as an option in future versions.

Things I Wish Were Better

I wish you could style content based on what container element it happens to flow into. That might be problematic as a different style in a different container might cause a reflow which pushes it back out of that container causing infinite looping sadness, but maybe there is some kind of solution for that.

I wish block level elements would remain block level even with the flow-from property. It's weird you have to set them to width: 100%;

I wish height: auto; worked on the region with the last bit of flowed content. I understand most flow regions can't do that because then they would just expand to fit all the content and not continue the flow, but the final region should be able to know what it has left and expand naturally.

I wish you could flow-from and flow-into the same element. That way one semantic element could be the source and only if it shrinks or goes away do the other regions get filled.

I don’t really agree with you there. If zoom is disabled on mobile layouts it means that the designer has fixed the maximum-scale to 1.0 which is naughty for a number of reasons not least accessibility. The only thing it apparently cures is device rotation.

However, my site for example is fully responsive but text and everything else can still be zoomed because I think it’s more important to be accessible than to suit a user rotating their ipad. After all they can quickly zoom-out and it fixes.

I do agree with your point about Navigation however, perhaps a fixed nav bar or anchor link that takes you back to the top might be something to look at. I’m aware that iOS devices do this for you though if you tap the title bar area up top.

This is very timely for me as I’ve been contemplating how I’ll merge two content list columns for an upcoming project.

As you point out, browser support is currently lacking for this method but it’s one to keep an eye on.

The only alternative I can think of currently is altering HTML on the fly with jQuery at different device widths. Specifically, moving the items in two columns into one, and then ordering chronologically. A pure CSS way would be preferable.

I like this solution better, actually. And I wouldn’t worry about Google “seeing a bunch of ads” because the entire containing div doesn’t even show up in the resulting html (I believe). Thus, Google will only see one set of ads.

The biggest problem with ad serving and show/hiding them is the analytics. If tools like Omniture and Analytics are used to track ads, then a hidden ad on a page is a very bad thing. Most tracking software will denote that ad as underperforming, and they are not yet smart enough to differentiate from the hidden ads and the ads that are in view.

I like the future possibilities of regions.. but the support just isn’t there. Doesn’t seem like the kind of thing that should be polyfilled as a fallback. Just do it in Javascript in the first place.
For WordPress… I like the idea of adding an ad to the loop.php(or content.php or whatever) and output and article and an ad paired. Then let things float to single column when the width gets to narrow. It’s the “ad on the bottom” solution, but per article. And we can do it now. The two per article could work as well. I think I’m going to try it this weekend with a clients’ theme.. see if he likes it. It’s not ads, but testimonials. I think it could work out nice!

Thanks! This solution is what I eventually arrived at: the combination of float: right/left declarations and media queries to snap to a single column layout once a threshold is reached. I’m just not a fan of the gap that’s created in between the ads containers when the first article’s height is more than the first two ads’ height. I haven’t found a fix for that…any thoughts would be appreciated!

Your Comment Preview is a perfect example of focusing attention on sh*t that doesn’t matter. Sure it’s a neat little trick, but it slows the user’s typing down to a snail’s pace.

In regards to the article…

1.) Most of your viewers are nerds whose screen resolution is large enough to accommodate two columns
2.) Most of your viewers are nerds who have ad block plus running
3.) Most people do not sit there resizing the browser window to see what happens.

Am I missing something here? All three of your points are invalid. The main purpose of this article (as well as almost all of the articles on this site) is to share techniques with other developers to use on their own projects; it’s not tailored specifically for css-tricks.com.

Dear Jimmy, in regards to this article, it’s not for the nerds browsers. :) It’s for we who build for clients who have a variety of screen sizes (not because they resize). We who have clients who don’t block ads…

It’s an experiment at a creative solution for adapting to screen resolutions… along with playing with source order, etc. It’s not a perfect solution (there isn’t one yet) but I for one welcome the experimentation and sharing. Thanks Chris!

(Not sure what happens with your browser with comment preview, but I’m not slowed at all in Chrome.)

For this specific example i.e. ads (as they are generally a fixed height), I would suggest interleaving the them in the markup and then using absolute positioning to shift them to the side column when on wider devices.

You will find it difficult to justify re-sizing ad’s like that to a client. If you sell a client a 300×250 adblock, it’s got to remain 300 x 250 across all responsive folds/layouts. So trying to sell this zoom option to a business investor is going to require some serious sales skills.

I think leader boards would be the biggest problem. The only solution I see is to swap the entire ad out with a different dimension version at lower resolutions.

I don’t have a huge issue with the placeholder divs with respect to screen readers. You can, of course, inject them with JavaScript, but the W3C states (HTML4 spec; couldn’t find anything in the HTML5 spec):

Hi – Great article! I’m the Group Product Manager for the Web Platform team at Adobe and I wanted to share a quick update for the things you wish were better with CSS Regions since they’re already in the works :)

-Styling: We have a plan to support this and in fact hope to share an update at the May CSS Face-2-Face Working Group meeting. Keep an eye on our blog (blogs.adobe.com/webplatform) for an update on the implementation and syntax for styling regions.

-block level elements & setting width to 100%: This is actually a bug in the implementation – for blocks in the normal flow, width:auto should compute to 100% for the regular blocks. For blocks that require shrink wrapping, we just converged on an implementation approach for that case. Stay tuned for these fixes to make it in over the next several weeks.

-Setting height:auto: This is also something we are currently working on and will share an update after May’s F2F WG meeting. Again, we’ll post an update on our blog after May. You can read a little bit more about the proposed approach here: http://wiki.csswg.org/spec/css3-regions/auto-height

-flow-from and flow-into the same element: After some discussion internally the engineers confirmed that this should in fact work since the spec and implementation allow for it. Its queued up to tackle in the upcoming weeks.

I wasn’t sure if there could be a legitimate use of CSS regions – all those demos of absolutely positioned containers on images – but this is pretty cool. There’s a good level of abstraction between content and presentation but the empty DOM nodes will make lots of purists shiver – has anyone tested if reflow will work with pseudo-elements?

While the example uses elements as regions (since [CSS3-GRID-LAYOUT] requires elements to create grid items) it is important to note that this is not required for regions. Regions can be pseudo-elements, such as ‘::before’ and ‘::after’. The only requirement for an element or pseudo-element to become a region is that it needs to be subject to CSS styling to receive the ‘flow-from’ property.

Such a good point. I also imagine that those that have ads on our sites aren’t thrilled about them always getting pushed down to the bottom from their premium top-of-the-sidebar spot as soon as things get narrow, so this is pretty sweet.

sorry, but I have a question about implementing both. Say you have a site with a column of news feeds on the right but the news feeds are more than what is in the center page. Well, is there a way to automatically move some of the news feeds under the center page until you keep adding more text to the center page, then it would revert the news feeds back over to the right column? css of course.

Hi, its wonderful infact. But i am having problem integrating it to sections inside Bootstrap Tab. It works for active tab, but couldn’t make it happen after clicking another tab. Any help would be highly welcome!

This comment thread is closed. If you have important information to share, you can always contact me.

Treehouse is where you go to learn HTML, CSS, and how to build iOS apps. It's a complete education in modern web and app technology, designed to get you ready for a hot new job or to kickstart your own business.

The Lodge is a member login only area with access to video training on how to build websites from scratch using the best modern tools.

How many people touch the CSS in your current main project?

What now? I have some ideas for you.

Go explore CodePen!

As a front end designer and developer, you should have an account on CodePen so you can save your snippets, present your ideas, and engage with the rest other front end folk. I'd encourage you to go PRO as well, to unlock the full power of CodePen.

Get the newsletter!

You should sign up for the CSS-Tricks newsletter. It's a clean copy of all the blog posts each week, combined together, right to your inbox. If email isn't your thing, there is an RSS feed, iTunes, and lots of other ways to subscribe.

Listen to ShopTalk!

Subscribe to The Lodge!

The Lodge is a members-only, ad-free video learning area here on CSS-Tricks. Just like the free screencasts, but organized into four large complete series. Membership is also the #1 best way to support CSS-Tricks.

We can do the real footer now.

Site Links

Colophon

CSS-Tricks* is created, written by, and maintained by Chris Coyier. It is built on WordPress, hosted by MediaTemple, and the assets are served by MaxCDN. The fonts are Source Sans and Source Code Pro. It is made possible by viewers like you who subscribe to The Lodge and through advertising for products and services I like.