Horizontal webpage in WebKit

Problem

I'm trying to create a webpage that is simular to "The Horizontal Way." The goal is to make all the container boxes fall horizontally instead of vertically without setting the width of the body.

Bellow is a basic version of my page. I've also played around with the idea of rotating the body 90deg but quickly ran into limitations.

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            * {
                -webkit-box-sizing: border-box;
            }
            body {
                position: absolute;
                top: 0;
                bottom: 0;
                width: 4000px;
            }
            .box {
                display: inline-block;
                height: 99%;
                width: 300px;
                margin: 5px;
                border: 1px solid #000;
                background-color: #FBF;
                -webkit-transition: all 500ms linear;
            }
            .box:hover {
                width: 600px;
            }
        </style>
    </head>
    <body>
        <div class="box">One</div>
        <div class="box">Two</div>
        <div class="box">Three</div>
    </body>
</html>

I'm not concerned with compatibility in other browsers but it must work in rescent versions of WebKit (Safari 5, Chrome 9, etc.).

edit: While looking at the base stylesheet for webkit I had come across the '-webkit-block-flow' property. I wasn't able to find much information on this, but it might give me the behavior I'm looking for.

Problem courtesy of: George Marshall

Solution

Using the -webkit-box display type I was able to achieve exactly what I was looking for. I've posted the revised code bellow.

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            * {
                -webkit-box-sizing: border-box;
            }
            body {
                display: -webkit-box;
                -webkit-box-orient: horizontal;
                position: absolute;
                top: 0;
                bottom: 0;
            }
            .box {
                width: 300px;
                margin: 5px;
                border: 1px solid #000;
                background-color: #FBF;
                -webkit-transition: all 500ms linear;
            }
            .box:hover {
                width: 600px;
            }
        </style>
    </head>
    <body>
        <div class="box">One</div>
        <div class="box">Two</div>
        <div class="box">Three</div>
    </body>
</html>
Solution courtesy of: George Marshall

Discussion

To me it seems that the most simple solution would be an unordered list with list elements containing body text/content.

Discussion courtesy of: Nick Anderegg

This recipe can be found in it's original form on Stack Over Flow.