5AMWE5T 5AMWE5T - 3 months ago 8x
CSS Question

Display img elements in vertical stack next to other img?

I'm trying to display a group of img elements like this:

enter image description here

I tried using float: left on IMG 1 and float: right on the other IMGs but they don't line up vertically. How would I do this?


One way to do this is to have two child divs in the container div. One should be img1 and the other should contain the other three, which should also have display: block; to work properly (img1, img2 and img 3).

  • Put float: left; on img1 and float: right on the container of the three smaller ones.

  • To be on the safe side, put again on both img1 and the new container: vertical-align: middle.

  • If the containers also have fixed dimensions it'll be even easier.


enter image description here