Horizontal scrolling website content

Horizontal scrolling website content

My objective is to make a website for my portfolio. I have a div for the
menu that wanted to be on top of another div that works as a container for
all of my images. The images have to fill 100% height of the browser. The
problem is, that I wanted my website to scroll horizontally and when I
start to add content, as soon as the width goes over the 100% of the
browser window the new image goes under the first image making it scroll
horizontally. What can I do to correct this? Here's my code:
<style>
<!--
body, html {height: 100%;}
#main {
width: 100%;
height: 100%;
background-color:#000;
position: absolute;
top: 0px;
left: 0px;
z-index: 1;
}
#menu {
width: 200px;
height: 500px;
background-color:#fff;
position: absolute;
top: 10px;
left: 10px;
overflow: scroll;
z-index: 2;
}
#img {
height:100%;
float: left;
overflow: scroll;
}
-->
</style>