CSS position absolute and full width problem

Question

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?

Tonguelash

Why would you want it to be wider than it's container? For me, it seems like you should take the dl outside of the containing divs if you don't want it to be bound by their constraints. – Sexist

Answer 1

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

Athanor

just a sidenote, left and right also accept negative values, see: jsfiddle.net/xWnq2/1 but requires parents not to have overflow: hidden; - this won't let you easily make it stretch to "maximum" however – Athanor

if you are looking for the width of the parent element then a mix of this as well as 2nd solution worked for me. – Soriano

Answer 2

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.

Conspectus

tried it, doesn't work.. still getting the 100% of the max 1003px – Tonguelash

@Tonguelash any margin, padding, borders? – Tribrach

I have tried a mix of both the top solution to use left:0 , right:0, And parent position relative and was able to achieve the expected result – Soriano

Answer 3

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;

Reinert

This just repeats xec's accepted solution from 2011. – Silage

Answer 4

Adding the following CSS to parent div worked for me

position: relative;
max-width: 100%

Woozy

This appears to repeat Andrzej's solution from 2011. – Silage

Answer 5

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;
}

Phinney

This isn't the worst idea, width: 100vw will force the element to be as wide as the viewport. However, because of overflow: hidden, and the main content is centered - it won't get placed to the left edge of the document, but instead overflow to the right, and be hidden. – Athanor

Answer 6

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

Erectile

Answer 7

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

Rotgut

I copied your code, run i FX remove overflow from #wrap and it works – Rotgut