CSS position absolute full width problem

Question

i have 2 divs and a dl    lt div id  wrap  gt    lt div id  header  gt     lt dl id  site nav global primary  gt    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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

Make  site nav global primary positioned as fixed and set width to 100   and desired height

[html] CSS position absolute full width problem

Examples related to html

Examples related to css