css左右浮动如何使用,CSS div左右浮动nowrap

一点背景：

我正在制作一个标题,它横跨我的网页顶部.我希望当前用户名,注销按钮等在标题中向右浮动,我希望徽标和一些navitems位于左侧.当浏览器窗口缩小使左项和右项碰撞时,我不希望它们换行.我将header-container div设置为overflow：auto,所以我希望它能够开始滚动.

问题是：

即使我有一个div float：left和一个div float：右边都有display：inline-block,而parent有white-space：没有换行 – 换行!!!我偶然发现我可以通过使用display：inline-block封闭另一个div来实现它.为什么是这样？？？

下面是我的代码和一个工作jsfiddle,以显示工作设置和包装设置.我不明白为什么我需要额外的div.

http://jsfiddle.net/klyngbaek/tNHLL/9/

当我缩小窗口时,我不希望第二个蓝色矩形下降到一个新行

HTML：

With extra inline-block dive. The blue rectangles do not wrap.

[logo] | home | [navitem1] | [navitem2]

[username] | logout

Without extra inline-block dive. The blue rectangles do wrap.

[logo] | home | [navitem1] | [navitem2]

[username] | logout

CSS：

.wrapper {

border:#333;

margin-bottom:;

}

.second-wrapper {

border:;

display:inline-block;

min-width: 100%;

}

.nowrap {

white-space: nowrap;

}

.clearfix {

clear: both;

}

.floating {

background: lightblue;

border:;

height:;

padding:}

.float-left {

float: left;

}

.float-right {

float: right

}

或者也许有更好的方法来实现我想要的.

提前致谢！

编辑：更新的jsfiddle链接