css - 如何让左浮动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;
}

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

-edit- 或者是否有办法让两个 div 并排放置直到它们碰撞，然后并排停止？

Answer 1

带走

position:absolute;

来自:

div#nav-wrap

和

img#logo

或将其更改为:

position:relative;

JsFiddle