Overlay of multiple images and their related sizes
===

I have three images which I want to overlay (with HTML + CSS, I do *not* want to use javascript if possible):

![image1][1] ![image2][2] ![image3][3]<br/><br/>
This is the result which I would like to achieve:
![My preferred result][4]<br/>
[image4]<br/>

This is what I have tried:

CSS:

    .imageContainer {
        position: relative;
    }
    
    #image1 {
        position: absolute;
        top: 0;
    
        border: 1px solid blue; 
    }
    #image2 {
        position: absolute;
        top: 0;
    
        border: 1px solid fuchsia; 
    }
    #image3 {
        position: absolute;
        top: 0;
    
        width: 10%;
        height: 10%;
    
        border: 1px solid green; 
    }

HTML:

    <div class="imageContainer">
        <img id="image1" src="http://i.stack.imgur.com/Es4OT.png"/>
        <img id="image2" src="http://i.stack.imgur.com/WQSuc.png"/>
        <img id="image3" src="http://i.stack.imgur.com/Xebnp.png"/>
    </div>​

**image1**: "main" image *(image1 should set max height and max width for an imageContainer - se HTML above)* [blue border]<br/>
**image2**: `horizontal-align: center;` and top: 0; relative to image1 [green border]<br/>
**image3**: resized by 10% from its' origin size, `horizontal-align: center;` relative to image1 [pink border]<br/>


My error prone HTML + CSS resulted in this:
![enter image description here][5]

I cant figure out how I my CSS should be. What should I do to achieve a result like [image4]?

  [1]: http://i.stack.imgur.com/Es4OT.png
  [2]: http://i.stack.imgur.com/WQSuc.png
  [3]: http://i.stack.imgur.com/Xebnp.png
  [4]: http://i.stack.imgur.com/vv8Og.jpg
  [5]: http://i.stack.imgur.com/ocI0G.png