Grow your CSS skills. Land your dream job.

positioning “header” outside the “wrapper” div

  • # March 7, 2012 at 9:34 pm

    I would like the header image to jut outside the brown “wrapper” div it’s contained in.
    I am using Genesis Framework. I supposed I create another div, but want to see if I can do this using CSS. Here is the CSS I am using. I tried using a position attribute, but none were working.

    http://www.palettedesign.com/

    #wrap {
    background-color: #aa6d24;
    margin: 75px auto;
    width: 960px;
    padding: 0;
    }

    #header {
    margin-top: -25px;
    margin: auto;
    height: 198px;
    width: 100%;
    background: url(images/head.png);

    }

    # March 7, 2012 at 11:02 pm
    #wrap {
    background-color:#aa6d24;
    margin:75px auto;
    width:960px;
    padding:0px 0px;
    position:relative; /* add relative position */
    }

    #header {
    margin:auto;
    height:198px;
    width:100%;
    background:transparent url(images/head.png) no-repeat;
    position:absolute;
    top:-208px; /* height + 10 */
    left:0px;
    }
    # March 7, 2012 at 11:28 pm

    Thank You :)

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".