Search code examples
cssimagealignmentcss-float

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?

Solution

  • 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 (img2, img3 and img 4).

    • 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.

    Image:

    enter image description here