two columns, left-right

[617arg]

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.

 

[slimp]

have you tried defining a width for the #header?

 

[jared_kipe]

You shouldn't have position: absolute;'s unless you actually plan on positioning them that way. Remove them, and you'll probably solve your problem.

 

[Darth.Titan]

Agreed. Get rid of those "position:absolute" declarations and things will work correctly.