CSS floated elements not sitting next to each other

Please take a look at: http://jsfiddle.net/yCrA8/

The blue sidebar should float next to red middle box but instead it's clearing it and sitting below...

How do I fix this? I can't set a width for the .Middle div because it has content that needs to flow outs开发者_JS百科ide of the browser view and be scrollable.

Cheers

See: http://jsfiddle.net/thirtydot/yCrA8/4/

One way is to use display: inline-block and white-space: nowrap.

Remove float: left from .Sidebar and .Middle, then add this:

.MainContent {
    white-space: nowrap
}
.Sidebar, .Middle {
    white-space: normal;
    vertical-align: top;
    display: inline-block;
    /* if you need ie6/7 support */
    *display: inline;
    zoom: 1
}

@Camernon; there is a reason why your middle div is not wrap because you did not define width to your middle div for this you can define width your middle & it's parent div

CSS:

.Middle
    {
        background:red;
        width:9125px;
        float:left;
    }

.MainContent
        {
            margin: 20px;
            width: 9330px;
        }

check this fiddle http://jsfiddle.net/sandeep/yCrA8/11/