CSS浮动元素不是彼此相邻

Question

请查看：http://jsfiddle.net/yCrA8/

蓝色侧边栏应该漂浮在红色中间框旁边，而是清除它并坐在下方......

我该如何解决这个问题？我无法为.Middle div设置宽度，因为它的内容需要在浏览器视图之外流动并且可以滚动。

干杯

Answer 1

请参阅： http://jsfiddle.net/thirtydot/yCrA8/4/

一种方法是使用display: inline-block和white-space: nowrap。

从float: left和.Sidebar移除.Middle，然后添加：

.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
}

Answer 2

@Camernon;有一个原因是你的middle div没有换行，因为你没有为你的width div定义middle，你可以定义宽middle＆amp;它是parent div

CSS：

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

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

检查这个小提琴http://jsfiddle.net/sandeep/yCrA8/11/