Images inside div keep moving

<div style="banner" top:0; align="center" position: absolute; z-index: 1; visibility: show;>
<img src="banner.jpg" /></div>
<div style="buttons" align="center" top:200; left:85; position: fixed; z-index: 开发者_运维技巧1; visibility: show;>
<img src="homebutton.jpg"/><img src="aboutbutton.jpg" /><img src="missionbutton.jpg" /><img src="contactbutton.jpg" /><img src="pricingbutton.jpg" /></div>
<div style="pics" align="center" top:370; position: fixed; z-index: 1; visibility: show;>
<img src="inrepair.jpg" /><img src="homeoffice.jpg" /><img src="onsite.jpg" /></div>
<div style="pics2" align="center" top=711; position: fixed; z-index: 1; visibility: show;>
<img src="computers.jpg" /><img src="networking.jpg" alt="Networking"/><img src="games.jpg"/></div>

The combined width of my images are 1024px. As soon as I drop the browser size below 1024px width all the images other than the banner start to stack on top of each other. I want them to just hide what cannot be shown like the banner is already doing. What can I do to fix this? I'm sure theres a very easy solution, but I'm pretty bad at html.

you can create a "container", element with fixed width of 1024px that will contain all of these images

<div style="width: 1024px">
    all of the images goes here
</div>

just note that if you what to keep the page without a horizontal scroll the <div> should be less than 1024 because of the vertical scroll