Set a Fixed div to 100% width of the parent container

Question

I have a wrapper with some padding, I then have a floating relative div with a percentage width (40%).

Inside the floating relative div I have a fixed div which I would like the same size as its parent. I understand that a fixed div is removed from the flow of the document and as such is ignoring the padding of the wrapper.

HTML

<div id="wrapper">   <div id="wrap">     Some relative item placed item     <div id="fixed"></div>   </div> </div> 

CSS

body {    height: 20000px  }   #wrapper {   padding: 10%; }   #wrap {    float: left;   position: relative;   width: 40%;    background: #ccc;  }  #fixed {    position: fixed;   width: inherit;   padding: 0px;   height: 10px;   background-color: #333; } 

Here is the obligatory fiddle: http://jsfiddle.net/C93mk/489/

Does anyone know of a way to accomplish this?

I have amended the fiddle to show more detail on what I am trying to accomplish, sorry for the confusion: http://jsfiddle.net/EVYRE/4/

Answer 1

You can use margin for .wrap container instead of padding for .wrapper:

body{ height:20000px } #wrapper { padding: 0%; } #wrap{      float: left;     position: relative;     margin: 10%;     width: 40%;      background:#ccc;  } #fixed{      position:fixed;     width:inherit;     padding:0px;      height:10px;     background-color:#333;     } 

jsfiddle

Answer 2

Try adding a transform to the parent (doesn't have to do anything, could be a zero translation) and set the fixed child's width to 100%

body{ height:20000px }  #wrapper {padding:10%;}  #wrap{       float: left;      position: relative;      width: 40%;       background:#ccc;       transform: translate(0, 0);  }  #fixed{       position:fixed;      width:100%;      padding:0px;      height:10px;      background-color:#333;  }

<div id="wrapper">      <div id="wrap">      Some relative item placed item      <div id="fixed"></div>      </div>  </div>