can't float inside div with position fixed - css

Question

http://jsfiddle.net/1351qL91/
<div style="width:200px">
<span style="float:left">left</span>
<span style="float:right">right</span>
<br/>
<div style="position:relative">
<span style="float:left">left</span>
<span style="float:right">right</span>
<div>
<br/>
<div style="position:fixed">
<span style="float:left">left</span>
<span style="float:right">right</span>
</div>
spans with float right won't float right inside a div with position fixed.
I came to the conclusion that float won't work if the container's width is
unknown, and in this case the width is indeed unknown.
So another question which may solve this problem is how to set a fixed position child to 100% width of it's parent?
P.S I'm using bootstrap 3, which means the container div (which I set to 200px) is actually of class col-md-3 -> I don't know the width of the container, that's why I need it to be dynamic

Answer 1

Floating wont work inside fixed or absolute divs unless you specify width.
You cannot use position:fixed to position inside the bootstrap grid. Fixed positioned divs are relative to the browser. You need to use absolute positioning.

Answer 2

How you want to float a div inside another if you don't have a width? You can use with %:
<div style="position:fixed; border:solid 1px #c1c1c1; width: 100%;">
<span style="float:left">left</span>
<span style="float:right">right</span>
</div>
Or, you can define a width to the div's inside:
<div style="position:fixed; border:solid 1px #c1c1c1;">
<span style="float:left; width:150px;">left</span>
<span style="float:right; width:150px;">right</span>
</div>

Answer 3

A fixed position element is positioned relative to the viewport, or the browser window itself.so when you give width:100% it takes up all the space in your viewport.
If you are using jquery there are plugins available that can be used to create a fixed postion side bar.
Examples:
http://www.berriart.com/sidr/#getstarted
http://spoiledmilk.com/blog/sticky-sidebar/

Answer 4

A JQuery solution i used for this problem:
-Modified html
<div id="firstDiv style="width:200px">
<span style="float:left">left</span>
<span style="float:right">right</span>
<br/>
<div style="position:relative">
<span style="float:left">left</span>
<span style="float:right">right</span>
<div>
<br/>
<div id="fixed" style="position:fixed">
<span style="float:left">left</span>
<span style="float:right">right</span>
</div>
-JQuery code:
$(document).ready(function ()
{
$('#fixed').width($('#firstDiv').width());
});
$( window ).resize(function()
{
$('#fixed').width($('#firstDiv').width());
});
And here your changed JSFiddle