I'm trying to give a div (position: fixed) the width of 100% (relating to it's parent div). But I've got some problems...
EDIT: The first problem is sovled by using inherit, but it still doesn't work. I think the problem is that I'm using multiple divs that take the 100%/inherit width. You can find the second problem on the jsfiddle update: http://jsfiddle.net/4bGqF/7/
Fox example
#container {
width: 800px;
}
#fixed {
position: fixed;
width: 100%;
}
and the html
<div id="container">
<div id="fixed">Sitename</div>
<p>
blaat
</p>
</div>
Or you can try it out: http://jsfiddle.net/4bGqF/
The problems seems to be that the fixed element is always taking the width of the window/document. Does anyone know how the fix this?
I can't give my fixed element a fixed with, because I'm using the jScrollPane plugin. It depends on the content whether there's a scrollbar or not.
Thanks a lot!
PS: The text of the 2 divs are on top of each other. This is just an example so that doesn't really matter.
I´m not sure as to what the second problem is (based on your edit), but if you apply width:inherit
to all inner divs, it works: http://jsfiddle.net/4bGqF/9/
You might want to look into a javascript solution for browsers that you need to support and that don´t support width:inherit