Although similar questions have been posed before, this one is different!
There are three divs present on my webpage.
WRAP serves as the main page wrapper with a border surrounding the inner divs.
OUTER represents the outer div.
RIGHT is the specific div that I want to move along with the page scroll.
You can observe in the image where RIGHT is positioned, and as the page scrolls down, I aim for RIGHT to follow.
I attempted setting the CSS position to fixed; however, resizing the page disrupts the layout. The current CSS settings are as follows:
#wrap
{
width: 100%;
margin: 50px auto;
padding: 20px 20px 20px 20px;
border:2px solid #800000;
}
#outer
{
margin: auto;
width: 700px;
height: 1250px;
display: table;
border: 2px solid #000008;
}
#right
{
float: right;
width: 100px;
height: 100px;
border: 2px solid #008000;
}
To visualize the current appearance, I've crafted a demo.
Any suggestions on how to smoothly transition RIGHT with the scrolling of the page?
Many thanks