Force content to flow horizontally

I'm looking to force the content of a box that is dynamically centered vertically to flow horizontally instead of the usual vertical flow that will require scrolling up or down.

#outerbox {
    height: 100%;
    overflow: hidden;
    position: relative;
}

/* Creating 2% margin on left & right then 3% on top and bottom */
#innerbox {
    height: 94%;
    margin: 0 2%;
    margin-top: -47%;
    position: absolute;
    top: 50%;
}

#content {
    height: 100%;
    min-height: 100%;
}

---

<div id="outerbox">
  <div id="innerbox">
    <div id="content">
      Content go开发者_JAVA技巧es here...
    </div>
  </div>
</div>

The problem is when I resize the browser window, instead of flowing right and have horizontal scrollbars, the content moves down beyond the centered box. Advice on what I'm doing wrong and solution?

---

Here is an example of creating a horizontally scrolling area with elements inside:

http://jsfiddle.net/6PupD/

The trick is the scrollable container has a width smaller than the object container. You will need to set the width of the object container large enough to hold all the elements.

Hope this helps.

Bob