HOw to make image stay inside the div box on scrolling
- by Mirage
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
