CSS position absolute and full width problem

Question

I want to change the <dl id="site_nav_global_primary"> below to take up the full screen width without changing the wrap and the header elements containing it.

When I try to position the <dl> element (see the /* problematic code */ section) below, the navigation gets the 100% of the wrapper which has a max width of 1003px. I want it to stretch to the maximum without changing the wrap and header divs.

#wrap {
    margin:0 auto;
    width:100%;
    min-width:760px;
    max-width:1003px;
    overflow:hidden;
    background-color: lightgray; /* for illustrative purposes */
}

#header {
    width:100%;
    position: relative;
    float:left;
    padding-top:18px;
    margin-bottom:29px;
    background-color: rebeccapurple; /* for illustrative purposes */
}

#site_nav_global_primary {    
    float:right;
    margin-right:18px;
    margin-bottom:11px;
    margin-left:18px;
    background-color: salmon; /* for illustrative purposes */
}

/* Problematic code */
#site_nav_global_primary {    
    position: absolute;
    width:100%;
    top:0px;
    left:0px;
}

<div id="wrap">
    <div id="header">
        <dl id="site_nav_global_primary">Lorem Ipsum</dl>
    </div>
<div>

Is this possible?

Answer 1

You could set both left and right property to 0. This will make the div stretch to the document width, but requires that no parent element is positioned (which is not the case, seeing as #header is position: relative;)

#site_nav_global_primary {    
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}

Demo at: http://jsfiddle.net/xWnq2/, where I removed position:relative; from #header