two columns, left-right

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

  1. 617arg macrumors 6502

    Joined:
    Mar 3, 2008
    #1
    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

    Joined:
    Apr 10, 2007
    #2
    have you tried defining a width for the #header?
     
  3. jared_kipe macrumors 68030

    jared_kipe

    Joined:
    Dec 8, 2003
    Location:
    Seattle
    #3
    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

    Darth.Titan

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

Share This Page