Why are my images going horizontal instead of vertical? - html

Question

Here is an image of my code in a browser window that shows the images laying out horizontally instead of vertically.
Is this simply the product of my browser width, and the size I made my images?
image of horizontal alignment
<div id="images">
<h3>Here is some design work that I have done</h3>
<img id="img1" src="photos/bees_wax_final_logo.jpg" width="200px" height="300px" alt="beeswax" />
<img id="img2" src="photos/before-and-after.jpg" height="200px" width="200px" alt="beforeandafter" />
<img id="img3" src="photos/Brush-work-buildings.jpg" alt="brushwork" height="200px" width="200px" />
<img id="img4" src="photos/Cosmic-woman.jpg" alt="cosmic" height="200px" width="200px" />
<img id="img5" src="photos/cosmo_elephant.jpg" alt="cosmo" height="200px" width="200px" />
<img id="img6" src="photos/Dispersion_window.jpg" alt="dispersion" height="200px" width="200px" />
<img id="img7" src="photos/Free_dogs_drawing.jpg" alt="freedogs" height:="200px" width="200px" />
<img id="img8" src="photos/Graphic-vector-art-logo-copy.jpg" alt="vectorart" height="200px" width="200px" />
<img id="img10" src="photos/I_am_coming_for_you.jpg" alt="shark" height="200px" width="200px" />
<img id="img10" src="photos/keener_raw_honey_logo.jpg" alt="rawhoney" height="200px" width="200px" />
<img id="img11" src="photos/Magazine_cover.jpg" alt="magazinecover" height="200px" width="200px" />
<img id="img12" src="photos/moon_man_background.jpg" alt="moonman" height="200px" width="200px" />
<img id="img13" src="photos/Nature_Double_Exposure.jpg" alt="nature" height="200px" width="200px" />
<img id="img14" src="photos/purple_water.jpg" alt="purplewater" height="200px" width="200px" />
<img id="img15" src="photos/Surrealism-style.jpg" alt="surrealism" height="200px" width="200px" />
<img id="img16" src="photos/Surrealism.jpg" alt="surrealsim2" height="200px" width="200px" />
<img id="img17" src="photos/the_greener_lawn.jpg" alt="greenlawn" height="200px" width="200px" />
<img id="img18" src="photos/Window-correction.jpg" alt="windowcorrection" height="200px" width="200px" />
</div>

Answer 1

Okay, quickest solutions would be to set a display: block on all the images to remove any floating around them using css. So they will stack vertically.
#images img{
display: block;
}
<div id="images">
<h3>Here is some design work that I have done</h3>
<img id="img1" src="photos/bees_wax_final_logo.jpg" width="200px" height="300px" alt="beeswax"/>
<img id="img2" src="photos/before-and-after.jpg" height="200px" width="200px" alt="beforeandafter"/>
<img id="img3" src="photos/Brush-work-buildings.jpg" alt="brushwork" height="200px" width="200px"/>
<img id="img4" src="photos/Cosmic-woman.jpg" alt="cosmic" height="200px" width="200px"/>
<img id="img5" src="photos/cosmo_elephant.jpg" alt="cosmo" height="200px" width="200px"/>
<img id="img6" src="photos/Dispersion_window.jpg" alt="dispersion" height="200px" width="200px"/>
<img id="img7" src="photos/Free_dogs_drawing.jpg" alt="freedogs" height:="200px" width="200px"/>
<img id="img8" src="photos/Graphic-vector-art-logo-copy.jpg" alt="vectorart" height="200px" width="200px"/>
<img id="img10" src="photos/I_am_coming_for_you.jpg" alt="shark" height="200px" width="200px"/>
<img id="img10" src="photos/keener_raw_honey_logo.jpg" alt="rawhoney" height="200px" width="200px"/>
<img id="img11" src="photos/Magazine_cover.jpg" alt="magazinecover" height="200px" width="200px"/>
<img id="img12" src="photos/moon_man_background.jpg" alt="moonman" height="200px" width="200px"/>
<img id="img13" src="photos/Nature_Double_Exposure.jpg" alt="nature" height="200px" width="200px"/>
<img id="img14" src="photos/purple_water.jpg" alt="purplewater" height="200px" width="200px"/>
<img id="img15" src="photos/Surrealism-style.jpg" alt="surrealism" height="200px" width="200px"/>
<img id="img16" src="photos/Surrealism.jpg" alt="surrealsim2" height="200px" width="200px"/>
<img id="img17" src="photos/the_greener_lawn.jpg" alt="greenlawn" height="200px" width="200px"/>
<img id="img18" src="photos/Window-correction.jpg" alt="windowcorrection" height="200px" width="200px"/>
</div>

Answer 2

If you want to show them vertically you can put a <br> after every image. Then you can center the images in your CSS file so that it looks cleaner. There are other ways of doing this. This might be one of the easiest.
<div id="images">
<h3>Here is some design work that I have done</h3>
<img id="img1" src="photos/bees_wax_final_logo.jpg" width="200px" height="300px" alt="beeswax" />
<br>
<img id="img2" src="photos/before-and-after.jpg" height="200px" width="200px" alt="beforeandafter" />
<br>
<img id="img3" src="photos/Brush-work-buildings.jpg" alt="brushwork" height="200px" width="200px" />