CSS position absolute and full width problem

user_537943 0
Viewed 204401

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?

css html
7 Answers

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_73209550

Adding the following CSS to parent div worked for me

position: relative;
max-width: 100%
user_106847870

This one also works. With this method, there is no need to interfere with positioning of parent divs. I have checked

#site_nav_global_primary {    
  position: absolute;
  width: 100vw;
}
user_108247400
Related