2 replies [Last post]
edwinkcw
edwinkcw's picture
Offline
newbie
Last seen: 2 years 23 weeks ago
Timezone: GMT+8
Joined: 2011-11-04
Posts: 2
Points: 3

I have three images, img1, img2, img3 with different sizes. I want to put all of them into a div such that img1 and img2 have same width while total height of img1 and img2 does not exceed the height of div. Then img3 is put on top of img1. So the layout is like that:

------------------------
| |
| |
| img1 |
| _______|
| | img3 |
------------------------
| |
| |
| img2 |
| |
| |
------------------------

In addition, the div has to be center in both vertical and horizontal direction.

How to I do that? Must I use javascript? Can I simply use CSS only?

edwinkcw
edwinkcw's picture
Offline
newbie
Last seen: 2 years 23 weeks ago
Timezone: GMT+8
Joined: 2011-11-04
Posts: 2
Points: 3

Sorry for the

Sorry for the layout

------------------------
|                       |
|                       |
|            img1       |
|                 ______|
|                | img3 |
------------------------
|                       |
|                       |
|            img2       |
|                       |
|                       |
------------------------

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 2 days 8 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5054
Points: 2632

Hi edwinkcw, This Centering

Hi edwinkcw,
This Centering horizontally/vertically without scripts should help, there are other how tos along similar lines.