How can i make a fixed div stick with the container div on the left side on all screen resolutions?

#container{
    background-color:#000;
    filter:alpha(opacity=85);
    -moz-opacity: 0.85; 
    opacity: 0.开发者_StackOverflow社区85; 
    width:1000px;
    min-height:1275px;
    height:100%;
    margin:auto;
}

#fixed{
    position: fixed; 
    top:150px; 
}

---

That is kinda impossible with the css property fixed, but what u could do is position the container div relative the position the fixed div absolute then simulate the fixed effect with Jquery. example

container{

background-color:#000;
filter:alpha(opacity=85); 
-moz-opacity: 0.85; 
opacity: 0.85; 
width:1000px;
min-height:1275px;
height:100%;
margin:auto;
position:relative;
}

fixed{

width:100px;
position:absolute; 
top:150px;
left:-100px;

}

the jQuery

$(document).ready(function() { var $scrollingDiv = $("#fixed"); $(window).scroll(function(){ $scrollingDiv .stop() .animate({"marginTop": ($(window).scrollTop() + 0) + "px"}, "slow" ); }); });

---

Not sure if i understand you correctly. Maybe this will work:

#container{
    background-color:#000;
    filter:alpha(opacity=85);
    -moz-opacity: 0.85; 
    opacity: 0.85; 
    width:1000px;
    min-height:1275px;
    height:100%;
    margin:auto;

    position:relative;
}

#fixed{
    position: absolute; 
    top:150px; 
}

Take a look: http://jsfiddle.net/gQP8X/2/ Note: I've made some changes to better jsfiddle conformance.

---

Try this,

 #wrapper{
    width: 600px;
    height: 2000px;
    margin: auto;
    position: relative;

 }

 #content{
    margin: auto;
    width: inherit;
    height: 100%;
    float: left;
 }

 #sidebar{
    width: 100px;
    height: 100%;
    position: absolute;
        left: -100px;
 }

 #fixed{
    top: 100px;
    width: 100px;
    height: 150px;
    position: fixed;
    background-color: cyan;
 }

And

    <div id="wrapper">
        <div id="content"></div>
        <div id="sidebar">
            <div id="fixed">something</div>
        </div>
    </div>