Dnns Dnns - 3 months ago 12
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...

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.

Answer

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

Comments