如何使左浮动div不重叠右浮动div

Question

我有以下代码：

<div id="wrap">
        <div id="nav-bar">
            <img id="logo" src="Logo.png" />
            <div id="nav-wrap">
                <ul id="nav">
                    <li class="nav-item"><a href="#">Introduction</a></li>
                    <li class="nav-item"><a href="#">History</a></li>
                    <li class="nav-item"><a href="#">Implementation</a></li>
                    <li class="nav-item"><a href="#">Weaknesses</a></li>
                </ul>
            </div>
        </div>
        ...otherdivs
</div>

和这个CSS：

html, body
{
    font-family:"Century Gothic", Helvetica, Arial;
    top: 0;
    left: 0;
    margin: 0;  
    padding: 0;
    background-color:#f4f1ec;
    background-image:url(bgtile.png);
    color: #60590d;
}

div#nav-bar
{
    background-image:url(navtile.png);
    height: 70px;
    width: 100%;
    position:fixed;
    z-index: 1000;
}

div#nav-wrap
{
    margin-right: 20%;
    float:left;
    position:absolute;
    right: 0;
    width: auto;
}
img#logo
{
    padding: 17px;
    padding-left: 20%;
    height: 48%;
    width: auto;
    position:absolute;
    float:left;
}

现在我想要的是一个菜单栏，该菜单栏位于页面顶部，徽标位于左侧，菜单项位于右侧。 屏幕调整大小时，菜单项应转到下一行，而不是重叠图像。 导航栏也应覆盖该更改的高度。 我尝试了无数种组合，但无济于事，这可能吗？

-edit-还是有办法让两个div并排，直到它们发生碰撞，然后并排停止？

Answer 1

检查这个小提琴http://jsfiddle.net/R2HYH/

CSS

html, body
{
    font-family:"Century Gothic", Helvetica, Arial;
    top: 0;
    left: 0;
    margin: 0;  
    padding: 0;
    background-color:#f4f1ec;
    background-image:url(bgtile.png);
    color: #60590d;
}

div#nav-bar
{
    background-image:url(navtile.png);
    height: 70px;
    width: 100%;
    position:fixed;
    z-index: 1000;
}

div#nav-wrap
{
    margin-right: 20%;
    float:left;
    right: 0;
    width: auto;
}
img#logo
{
    padding: 17px;
    padding-left: 20%;
    height: 48%;
    width: auto;
    float:left;
}

Answer 2

带走

position:absolute;

从：

div#nav-wrap

和

img#logo

或将其更改为：

position:relative;

的jsfiddle

Answer 3

在div#nav-wrap删除

position:absolute; right: 0;

在img#logo删除position:absolute;