Hello, im relatively new to html so bear with me, if i sound weird/use incorrect terms im sorry.

Im a graphic designer experimenting with creating my own site, basically as a hobby.

Ive started by adding 3 personal images. When you hover the image with mouse, it displays text. However, i cannot get the 3 images to display side by side, they go vertically.

without the code that makes the text appear when hovering, i can make them go side by side, but when i add the hover code it wont work. as the code is somewhat lengthy to add the hover effect, i dont know where to put in how to make them go side by side (if that makes sense).

how do i get the 3 separate containers/divs to go side by side? i have also edited the container width to 33% but wouldnt work.

Here is the code ive copied, obviously with my own image descriptions locations etc.
https://www.w3schools.com/howto/tryit.asp?f...ge_overlay_fade


Any help would be appreciated, thanks.

You could float all DIV.container left. Provided you don't use that class for something you don't want floated - in that case come up with a new class just for this. Then fix it up with a little margin between the DIVs maybe. This method will cause the image DIVs that don't fit in the window to drop down and float to the left below the first image. This is usually a good thing as it lets the page adapt to the user's viewport.