How to float elements side-by-side that go beyond page size?

I have run into a strange situation where I need to float two elements. The first is rather small around 250px. The second is large (800px), and creates horizontal scrollbars. I would like to float both of these elements so they are side-by-side, but the second gets pushed to its own line?

Is it possible to float two element side-by开发者_如何学编程-side when they take up more than the page? I can't change the page size, or anything. I just want to know if this is possible and how.

Thanks

You could float a 250px and 800px div inside a 1050px wide box.

<div style="width:1050px;">
    <div style="width:250px;float:left">left</div>
    <div style="width:800px;float:left">right</div>
</div>

You want to add:

overflow-x: scroll;
white-space: nowrap;

To your wrapping div around those two elements.

And add:

display: inline-block;

To the div's to be overflowed.

JSFiddle