CSS Position Absolute and Full Width Problem

CSS position absolute and full width problem

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

How to force position absolute with 100% width to fit into parent div with padding?

If it has to be responsive, you could add the the padding as a margin and then use calc for the width:

.box2 {
    position: absolute;
    width: calc(100% - 40px);
    left: 0px;
    padding: 50px 0;
    margin: 0 20px;
    colour: #000;
    background: #fff;
    border: solid thin #06F;
}

width: 100% of an absolute positioned element is bigger than the parent

By making any element position: absolute; means: place me to the first parent that is position: relative; which is not always equal to its parent element.

And if there are other children you need to remember that one of them will be places "under" the element posiotionated absolutely.

Is it possible for absolute div to have width: auto, and also ignore it's parent's width?

This is somewhat solved by wrapping abs in an absolute div that has a much wider width than the relative parent. The problem now becomes sizing wrapper to stretch to the right of the viewport, which is a topic for another question.

.parent {  position: relative;  background: #EEE content-box; /* Color only the content */  width: 100px;}.abs-wrapper {  position: absolute;  width: 800px;}.abs {  position: absolute;  max-width: 200px;  border: 1px solid gray;}

  <div class="parent">    <div>      Doesn't work.    </div>    <div class="abs-wrapper">      <div class="abs">        This correctly wraps after 200px, because it's parent is a wrapper with a very large width. Thus, this div will stretch-to-fit, and also honor max-width.      </div>    </div>  </div>        <div class="parent" style="margin-top: 150px">    <div>      Doesn't work.    </div>    <div class="abs-wrapper">      <div class="abs">        < 200px shrinks to fit.      </div>    </div>  </div>

Button with absolute position doesn't stretch to full width

You can set width:inherit on the button, but be aware that it won't work when box-sizing:border-box is set on the container, otherwise you will probably need width:calc(100% - paddings), also mentioned in the other answer.

button {
  width: inherit;
}

---

Related Topics