jquerycssjquery-plugins

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

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.

PS: The text of the 2 divs are on top of each other. This is just an example so that doesn't really matter.


Solution

  • 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