[html] CSS position absolute 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 navigaation 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 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;

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

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