I'm rying to create a website with only horizontal scrolling. Please take a look at this demo. My problem is when I resize the browser, the content(the paragraph inside the light yellow box) doesn't reposition. I want that paragraph to be positioned above the yellow ring segment. How can I do that?

Below is my code.

HTML

{div id="container">

<img id="backimage" src="images/rings.png" />

{div id="info"}
{p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer at sollicitudin turpis. Fusce fermentum, odio vitae luctus mollis, tortor mauris condimentum leo, at interdum urna massa a orci. Class aptent taciti sociosqu ad litora torquent per conubia
</p>
</div>


</div>

</body>
</html>

CSS

a { text-decoration:none; }

li {list-style-type:none; }

body { overflow-y:hidden; }

#container {
    position:absolute;
    height:100%;
    width:10000px;
    background-color:#FC9;
}

#info {
    position:absolute;
    width:200px;
    height:220px;
    background-color:#FFC;
    top:180px;
    left:250px;
}

#backimage {
    position:absolute;
    height:100%;
    background-size:cover;
    bottom:0;
}

I tried setting #info's position as relative but when I do that, it disappears from the page.

Here is a pen. Full view