I have the image position fixed inside div and code is gven below

#content{
margin-top:100px;   
width:900px;    
color:#009;
border:1px solid red;
overflow:hidden;
display:block;

}
img {
float:left; 
position:fixed;
top:140px;
padding:50px;
}
#text{
    display:block;
border:1px solid green; 
width:500px;    
height:1200px;
float:right;    
overflow:scroll;
}
#footer{
    clear:both;
    width:600px;
    height:300px;
    border:2x solid blue;
    color:#939; 
}

HTML is

<div id="content" >
<img src="bar.jpg" width="46" height="639" /> 
<div id="text">
ggggggggggggggggggfgdfgdfgdgdfgdgdfgdf
</div>
</div>


<div id="footer">

Footer text
</div>
</body>

Now when i scroll down then image comes out of the content div box. IS there any way so that even if i scroll the image bar should stay inside the div box.

The screen shot shows my problem First Screen is ok without scrolling

But when i scroll the text full then it covers my footer as well