How to get left float div to not overlap right float div

Question

I have this code:

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

and this 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;
}

Right now what i want is a menu bar that sticks at the top of the page, with the logo to the left and the menu items to the right. When the screen resizes, the menu items should go to the next line instead of overlapping the image. The nav-bar should cover the height of that change as well. I've tried countless of combinations but to no avail, is this possible?

-edit- or would there be a way for the two divs to be side by side until they collide, then stops just side by side?

Answer 1

Take away

position:absolute;

from:

div#nav-wrap

and

img#logo

or change it to:

position:relative;

JsFiddle

Answer 2

Check this fiddle 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 3

In div#nav-wrap remove

position:absolute; right: 0;

In img#logo remove position:absolute;