Question

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 outside of the browser view and be scrollable.

Cheers

Answer 1

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
}