I am attempting to build a website with solely horizontal scrolling. Check out this demo for reference. My issue arises when I resize the browser, as the content (paragraph within the light yellow box) fails to reposition itself. Ideally, I would like that paragraph to be situated above the yellow ring segment. How can I go about achieving this?
Here is my code:
HTML
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheets/normalize.css" />
<link rel="stylesheet" type="text/css" href="stylesheets/styles.css" />
<script type="text/javascript" src="scripts/jquery.min.js"></script>
<script type="text/javascript" src="scripts/scripts.js"></script>
</head>
<body>
<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><!-- end of info -->
</div><!-- end of container -->
</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 experimented with setting #info's position to relative, but it ended up disappearing from the page.