Home/ Questions/Q 8345803
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-09T06:48:12+00:00

I’m trying achieve a way to display my images in a particular layout using

  • 0

I’m trying achieve a way to display my images in a particular layout using CSS. I can’t figure how I can do this using CSS.

I’m placing two small images on top of each other and one tall one on the right alongside the small images, the tall image has height equal to the small photos.

Required layout:

┌─────────────┬────────────┐
│ SMALL IMAGE │            │
├─────────────| TALL IMAGE |
│ SMALL IMAGE │            │
└─────────────┴────────────┘

my code is on jsfiddle here : http://jsfiddle.net/VjfGS/

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    To achieve the desired output with minimal markup changes: http://jsfiddle.net/pratik136/AzyQG

    HTML:

    <div class ="image-section">
    <img class="tall" src ="http://static.guim.co.uk/sys-images/Lifeandhealth/Pix/pictures/2009/3/5/1236251569000/Six-gorgeous-plants-Close-001.jpg" width="60px" height="180px">
    <img src ="http://static.guim.co.uk/sys-images/Lifeandhealth/Pix/pictures/2009/3/5/1236251569000/Six-gorgeous-plants-Close-001.jpg" width="120px" height="90px"> 
    <img src ="http://static.guim.co.uk/sys-images/Lifeandhealth/Pix/pictures/2009/3/5/1236251569000/Six-gorgeous-plants-Close-001.jpg" width="120px" height="90px">
</div>
<div class ="image-section"></div>

    CSS:

    .tall {
    float: right;
}
img {
    float: left;
}
.image-section{
    width: 180px;
}​

    output

    • 0