I am facing a problem with an absolutely positioned DIV. It is placed beside an image, and below it, there is another DIV. Everything looks good in fullscreen mode, but when I resize my browser window, the text spills into the lower DIV. What I really want is for the browser to create a horizontal scrollbar so that the text can continue in a line. You can check out the issue on Jfiddle here:
You need to adjust the width of your browser to observe the problem.
HTML
<div>
<div id="d1">
<img src="abc.jpg" />
</div>
<div id="d2">Here is a long line of text that will overlap the bottom portion. This is not desirable as it negatively impacts my design. Can someone assist me with this issue?</div>
<div id="d3">I do not wish to be disturbed!</div>
</div>
CSS
#d1 {
left:0;
top:0;
}
#d2 {
position:absolute;
left:50px;
top:0px;
}