Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Image overlay color block in a horizontal image scroll Reply To: Image overlay color block in a horizontal image scroll

#267806
Beverleyh
Participant

The issue I am running into is there seems to be incorrectly coding my divs so it starts pushing my images to the bottom instead of maintaining a horizontal structure. I have no clue how to resolve this

If you’re using a div to wrap each image, note that their default display state is block. Block-level elements will take up 100% width of their container, hence it pushing images down to show only one per line. You can try floating the divs with float: left;, but remember to clear the float otherwise the layout will collapse: overflow: hidden; applied to the gallery container element should be enough.

As an alternative to floats, you could also try flexbox to structure your div/imgs inside the gallery https://css-tricks.com/snippets/css/a-guide-to-flexbox/