Width: 100% with Position: Absolute

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

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.

Absolute positioning inside relative with 100% width

Yes you can use 100vw which is equal to window width and also use calc to position of absolute element. So if width of parent element is 50% to position absolute element to left: 0 of window you can use transform: translate(calc(-100vw + 75%)) which in this case is equal to -25vw.

html,body {  box-sizing: border-box;  margin: 0;  padding: 0;}.relative {  position: relative;  width: 50%;  background: lightblue;  height: 50px;  margin: 0 auto;}.absolute {  position: absolute;  left: 0;  background: black;  height: 2px;  top: 50%;  width: 100vw;  transform: translate(calc(-100vw + 75%), -50%);}

<div class="relative">  <div class="absolute"></div></div>

width: 100% with position: absolute

When I add position:absolute, the width of the div is only as wide as
the content within.. (Similar to floats). Is there any way around
this?

I cannot simply specify width:100% since this does not take in to
account border sizes, etc..

You could use position:absolute; left:0; right:0; top:0.

Like this: http://jsfiddle.net/thirtydot/yQWGV/

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

How can I set 'absolute' or 'fixed' with width: 100% to its parent div not the window size?

You can't do it with fixed, but you can set the parent div (the black box in your example) to have position: relative; and that will make the absolute positioned child position itself according to the parent div.

Why is this?

Absolute - the element is positioned absolutely to its first positioned parent. -- DZone

What this means is that the absolute positioned element will position itself according to the nearest ancestor with an assigned position, besides static.

I hope this is clear enough, but let me know if it's not.

100% width on position absolute element

This is because the element with position:absolute is positioned in reference to <html> since <body> doesn't have a position to put it in reference to. Thus, it's inheriting its width from html as well.

To fix it, add position:relative to body

Demo

100% width on an absolute positioned image

You could try this:

.aaaaa {
position: relative;
}

.bottomImage {    
position: absolute;
left: 0;
right: 0;
}

https://jsfiddle.net/1oxy7odv/

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!