5AMWE5T 5AMWE5T - 1 year ago 97
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?

Answer Source

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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download