Jack Murdoch Jack Murdoch - 1 month ago 9
CSS Question

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

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

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

Comments