two columns, left-right

Hi. I'm just getting started on web design and I just can't figure something out.

I'm trying to set a header as a 100% width, with a logo taking up 50% of the space on the left and a nav element taking 50% of the space on the right.

When I load the site though the nav just stacks itself over the logo, with both on the left. Some of the css is below.

#wrap {
width: 100%;
max-width: 1192px;
min-width: 755px;
margin: 0 auto;
padding: 5px;
overflow: hidden;
position: relative;
}

#header {
height: 182px;
background-color: #ffffff;
padding-top: 18px;
border-bottom: solid;
border-width: 1px;
border-color: #c7c7c7;
}

#site-logo {
display: block;
position: absolute;
float: left;
width: 50%;
}

#main-nav {
display: block;
position: absolute;
float: right;
width: 50%;
}

Any idea what I'm doing wrong?

Thanks for any help.