html - 横スクロールのウェブコンテンツ

Question

私の目的は、ポートフォリオ用のウェブサイトを作ることです。すべての画像のコンテナとして機能する別の div の上に配置したいメニュー用の div があります。画像は、ブラウザの 100% の高さを埋める必要があります。問題は、自分のウェブサイトを水平方向にスクロールさせ、コンテンツを追加し始めると、幅がブラウザー ウィンドウの 100% を超えるとすぐに、新しい画像が最初の画像の下に入り、水平方向にスクロールすることです。

これを修正するにはどうすればよいですか?

CSS

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;
}

Answer 1

#main タグから幅を削除します。要素が 100% に達するとすぐに、次の行に移動します。