the horizontal web
The web is vertical. It has been from the very beginning and people still think of it that way. Just look at the traditional scroll wheel on a mouse for some deep-rooted evidence. It's such a basic feat that we hardly take time to consider it anymore, but in the past few months (maybe even years) there have been signs that horizontal is making big strides forward. Suddenly horizontal is a real thing and guess what ... the web is far from ready for it.
horizontal
The first big push for horizontal was given by Apple. When they released the iPhone and added the swipe gesture horizontal suddenly started to make sense. Going from left to right on a touch device is generally easier than scrolling from top to bottom, so apps started to include some horizontal patterns (swipe for navigation, swipe for next, ...). Some watered-down versions of these patterns found their way to the web (like hidden navigation that pops up by pulling the content away), but the overall impact was pretty minor. The schism between apps and web was just too big for the web to really bother.
Last week Microsoft launched Windows 8, which is all about horizontal. The home screen is horizontal, the Metro apps are horizontal, even the standard scroll behavior of the mouse in apps is changed to match horizontal scrolling. If you're using Windows 8 you can't get past horizontal, meaning that from now on a lot of people are going to get used to horizontal layouts, especially when they are combining Windows 8 with tablets.
horizontal on the web
Looking at the web though, horizontal is still nowhere. I remember some early experiments (late 2000s I think) where you navigated a pattern of screens that could be laid out horizontally, but that was little more than a screen-wide carousel of pages (and not a very continuous layout either). And if you take a closer look at css (our primary means for layouting) there isn't much in the way of horizontal layouting available, especially not when dealing with flow content.
There is no clear:top; or clear:bottom; (even though there was a pretty interesting float clearing bug in ie6 or ie7 where you could mimic this supposed behavior), there are no horizontal grids, no way to properly break content when it overflows at the bottom of its parent container. It's not completely hopeless though, so let's see which techniques we have to our disposal today.
option 1: tables!
If you thought this was going to pretty, think again. Chris Coyier came up with a method that uses tables to force the layout off the screen. As you probably know, tables are pretty rigid structures where rows aren't allowed to wrap vertically. So once a table becomes too wide for the available screen space, it just runs off the right side of the screen and it creates a horizontal scrollbar.
Chris even provided a javascript solution that kept all the ugly (unsemantic) html code out of your html document, but that's not even my primary concern here. The problem with tables is that each cell is pretty much contained to its own rectangular space, which makes any complex layouting virtually impossible. Also, making content flow from one cell to another is simply impossible. Chris' trick is nice is you want to layout a flat structure horizontally, but when it comes to actual page layouts and structures it's far from ideal.
option 2: css multi-column layout module
In css3 there's something called the multi-column layout module. It sounds exactly like what we need and at first glance it offers us some very interesting options. It gives us a way to columnize text, but also more complex html structures (for example lists). Very useful in its own right, but when it comes to page layouting it's still far from perfect.
The problem with the multi-column layout lies with the column-span property. It sounds awesome as it allows an element to span multiple columns, but when you take a closer look at the property you'll find that it only accepts "none" and "all" as valid values. So you either span 0 columns, or you span all columns. Completely useless in other words, and it's not just some browser issue thing either, any other values are just not supported in the spec so we won't be seeing any support for them soon.
option 3: absolute positioning
You have two options: either you use Isotope, a script that resembles the popular jQuery Masonry plugin but also allows for horizontal stacking. It's pretty nice for flat structures (where each stackable block is on the same DOM level) when logical order isn't essential, but for regular layouts it still falls flat.
The other option is to write your own script. It's not all that hard if you know your way around jQuery, but you'll find that a lot of work goes into layouting the individual elements and as you need to keep the order of your stackable elements consistent you really have to plan ahead. It's nice in a proof-of-concept kinda way, but I wouldn't advise taking this route on a real site as much of the layout stems from the html (through data- attributes) and not from the css.
option 4: structural fuck-up with a dash of javascript
The final option is probably the most flexible one, but it requires you to forgo your neatly laid out and logical html structures, just adding whatever div necessary to float everything that needs to be floated (each logical columns becomes a div) wrapped in a container with near-infinite width (which can be reset to the actual content width with javascript on page load).
It works, but I'd rather be found dead than taking this route.
conclusion
And that's about all I can come up with right now. None of the above options deliver a real, clean solution to horizontal layouting. I admit that horizontal layouts are quite new and still need a long way to go before they become mainstream, but the signs are there: between this and two years, we won't look twice when we encounter a horizontal layout. Chances are very slim we'll find them on the web by that time though.
My main concern is that for now horizontal layouts are just completely absent in css, unless I missed (an interesting part of) a newly developed module. It's not even an afterthought. If you want a horizontal layout, you're pretty much screwed unless you completely tailor your html and javascript to accomplishing just that. If you know of any other techniques, do share!