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.
<div id="wrapper">
<div id="wrap">
Some relative item placed item
<div id="fixed"></div>
</div>
</div>
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/
man your container is 40% of the width of the parent element
but when you use position:fixed, the width is based on viewport(document) width...
thinking about, i realized your parent element have 10% padding(left and right), it means your element have 80% of the total page width. so your fixed element must have 40% based on 80% of total width
so you just need to change your #fixed class to
#fixed{
position:fixed;
width: calc(80% * 0.4);
height:10px;
background-color:#333;
}
if you use sass, postcss or another css compiler, you can use variables to avoid breaking the layout when you change the padding value of parent element.
here is the updated fiddle http://jsfiddle.net/C93mk/2343/
i hope it helps, regards
You could use absolute positioning to pin the footer to the base of the parent div. I have also added 10px padding-bottom to the wrap (match the height of the footer). The absolute positioning is relative to the parent div rather than outside of the flow since you have already given it the position relative attribute.
body{ height:20000px }
#wrapper {padding:10%;}
#wrap{
float: left;
padding-bottom: 10px;
position: relative;
width: 40%;
background:#ccc;
}
#fixed{
position:absolute;
width:100%;
left: 0;
bottom: 0;
padding:0px;
height:10px;
background-color:#333;
}
On top of your lastest jsfiddle, you just missed one thing:
#sidebar_wrap {
width:40%;
height:200px;
background:green;
float:right;
}
#sidebar {
width:inherit;
margin-top:10px;
background-color:limegreen;
position:fixed;
max-width: 240px; /*This is you missed*/
}
But, how this will solve your problem? Simple, lets explain why is bigger than expect first.
Fixed element #sidebar
will use window width size as base to get its own size, like every other fixed element, once in this element is defined width:inherit
and #sidebar_wrap
has 40% as value in width, then will calculate window.width * 40%
, then when if your window width is bigger than your .container
width, #sidebar
will be bigger than #sidebar_wrap
.
This is way, you must set a max-width in your #sidebar_wrap
, to prevent to be bigger than #sidebar_wrap
.
Check this jsfiddle that shows a working code and explain better how this works.
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 }_x000D_
#wrapper {padding:10%;}_x000D_
#wrap{ _x000D_
float: left;_x000D_
position: relative;_x000D_
width: 40%; _x000D_
background:#ccc; _x000D_
transform: translate(0, 0);_x000D_
}_x000D_
#fixed{ _x000D_
position:fixed;_x000D_
width:100%;_x000D_
padding:0px;_x000D_
height:10px;_x000D_
background-color:#333;_x000D_
}
_x000D_
<div id="wrapper">_x000D_
<div id="wrap">_x000D_
Some relative item placed item_x000D_
<div id="fixed"></div>_x000D_
</div>_x000D_
</div>
_x000D_
How about this?
$( document ).ready(function() {
$('#fixed').width($('#wrap').width());
});
By using jquery you can set any kind of width :)
EDIT: As stated by dream in the comments, using JQuery just for this effect is pointless and even counter productive. I made this example for people who use JQuery for other stuff on their pages and consider using it for this part also. I apologize for any inconvenience my answer caused.
Remove Padding: 10%;
or use px instead of percent for .wrap
see the example : http://jsfiddle.net/C93mk/493/
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: 200px;
background:#ccc;
}
#fixed{
position:fixed;
width:inherit;
padding:0px;
height:10px;
background-color:#333;
}
Source: Stackoverflow.com