Dnns Dnns - 5 months ago 18
CSS Question

Set width of a "Position: fixed" div relative to parent div

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...

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>

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