CSS position absolute and full width problem

i have 2 divs and a dl:

<div id="wrap">
 <div id="header">
  <dl id="site_nav_global_primary">

and this is my style:

#wrap {
    margin:0 auto;
    width:100%;
    min-width:760px;
    max-width:1003px;
    overflow:hidden;
}

#header {
    width:100%;
    position:relative;
    float:left;
    padding-top:18px;
    margin-bottom:29px;
}

#site_nav_global_primary {    
    float:right;
    margin-right:18px;
    margin-bottom:11px;
    margin-left:18px;
}

Now i want to change site_nav_global_primary to have a full screen width without changing the wrap and the header. but when i try:

#site_nav_global_primary {    
    position: absolute;
    width:100%;
    top:0px;
    left:0px;
}

The navigation gets the 100% of the wrapper which is max 1003px width. i want it to stretch to the maximum without changing the wrap and header divs.

Is this possible?

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

You need to add position:relative to #wrap element.

When you add this, all child elements will be positioned in this element, not browser window.

I have similar situation. In my case, it doesn't have a parent with position:relative. Just paste my solution here for those that might need.

position: fixed;
left: 0;
right: 0;

Adding the following CSS to parent div worked for me

position: relative;
max-width: 100%

Make #site_nav_global_primary positioned as fixed and set width to 100 % and desired height.

I don't know if this what you want but try to remove overflow: hidden from #wrap