Home › Forums › CSS › Image overlay color block in a horizontal image scroll › Reply To: Image overlay color block in a horizontal image scroll
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/