two columns, left-right


macrumors 6502
Original poster
Mar 3, 2008
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.


macrumors 68030
Dec 8, 2003
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.