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?

html css css-position
Edit
Report