How to Force Position Absolute With 100% Width to Fit into Parent Div With Padding

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

Enforce absolute child element to fit parent with padding

You could do this using box-sizing: border-box; and width: calc(100% - 50px);

https://jsfiddle.net/wmbszuzo/10/

Position element absolute relative to 100% width parent

This fiddle shows what you want, even when resized it will stay in the correct position.

I modified .child .box and added a right: 50%; and margin-right: -250px;

.child .box {
    position: absolute;
    bottom: -10px;
    right: 50%;
    margin-right: -250px;
    background: #fed;
    padding: 10px 25px;
    color: #000;
    font-size: 20px;
    z-index: 10;
    display: block;
}

What this basically does is:

right: 50%; - makes sure the element is always positioned 50% from the right side of the screen.
margin-right: -250px; - this is half of the width of your navigation, since your nav is centered it will be aligned the same as right: calc(50% - (half-width-of-nav)); so the same calculation is made for positioning this element.

I hope this is understandable to you, if not let me know and I'll try to elaborate.

Also - if you can use CSS calc() (compatibility table) you could remove the negative margin and just use right: calc(50% - 250px);

Also note that if you change the width of your nav you'll also have to update this too so it comes at a price but when you visually change your design you'll see that this is no longer positioned correctly and all you'll have to do is modify the value.

Good luck!

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>

Absolute positioning ignoring padding of parent

First, let's see why this is happening.

The reason is that, surprisingly, when a box has position: absolute its containing box is the parent's padding box (that is, the box around its padding). This is surprising because usually (that is, when using static or relative positioning) the containing box is the parent's content box.

Here is the relevant part of the CSS specification:

In the case that the ancestor is an inline element, the containing block is the bounding box around the padding boxes of the first and the last inline boxes generated for that element.... Otherwise, the containing block is formed by the padding edge of the ancestor.

The simplest approach—as suggested in Winter's answer—is to use padding: inherit on the absolutely positioned div. It only works, though, if you don't want the absolutely positioned div to have any additional padding of its own. I think the most general-purpose solutions (in that both elements can have their own independent padding) are:

Add an extra relatively positioned div (with no padding) around the absolutely positioned div. That new div will respect the padding of its parent, and the absolutely positioned div will then fill it.
The downside, of course, is that you're messing with the HTML simply for presentational purposes.
Repeat the padding (or add to it) on the absolutely positioned element.
The downside here is that you have to repeat the values in your CSS, which is brittle if you're writing the CSS directly. However, if you're using a pre-processing tool like SASS or LESS you can avoid that problem by using a variable. This is the method I personally use.

Force absolute div to listen to parent's padding?

You can fix the issue using a wrapper

Your HTML will look something along these lines:

<div id="panel">
    <div class="wrapper">
        <div id="bottom">
            <div class="update">
                a          
            </div>
        </div>    
    </div>
</div>

And your CSS:

#panel {
    width: 21.25%;
    height: 100%;
    background-color: #0794ea;
    float: left;
    padding: 0 1.5%;
    box-sizing: border-box;
}

.update {
    width: 100%;
    background-color: #006699;
    text-align: center;
    height: 56px;
    color: white;
}

.wrapper {
    position: relative;
    height: 100%;
}

#bottom {
    position: absolute;
    bottom: 20px;
    left: 0;
    width: 100%;
    background: yellow;
}

Here is a pen with the end result: http://codepen.io/DanielVoogsgerd/pen/Lezjy

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