Three images in a div in an L shape ?

[Digmen1]

Hi Guys

I have a div in which I want to place three images

One on one row at the top left, The other two on the second row side by side. So that the three images form an L shape.

Any suggestions on the best techniques to achieve this ?

[marcel]

Hi Digmen1,

You could try the following:

- place the first image (float it left or right if you want)

- the next image will need a clear: both; (if you've floated the first image float this one as well)

- and the next image will only need the same float as the two above it (if they have one)

* this is off the top of my head, and untested

[swa66]

Images are by default inline elements.

<div>
  <img src="1-1.jpg" alt="mandatory" />
  <br />
  <img src="2-1.jpg" alt="mandatory" />
  <img src="2-2.jpg" alt="mandatory" />
</div>

No need for anything fancy ...

[DrDoc]

The first image you want to specify

vertical-align: bottom

on, to avoid a gap between the first and second line.

[marcel]

No need for anything fancy ...

Stupid of me... I got so caught up in trying to achieve this with CSS I completely overlooked the fact that styling is practically unnecessary... :)

[Digmen1]

Thanks guys

Yes swa66 that worked perfectly !