two columns, left-right

Discussion in 'Web Design and Development' started by 617arg, Mar 14, 2012.

  1. 617arg macrumors 6502

    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.
  2. slimp macrumors newbie

    Apr 10, 2007
    have you tried defining a width for the #header?
  3. jared_kipe 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.
  4. Darth.Titan macrumors 68030


    Oct 31, 2007
    Austin, TX
    Agreed. Get rid of those "position:absolute" declarations and things will work correctly.

Share This Page