Event resolution for overlapping DIV siblings

I have a problem, where I have 2 sibling divs that overlap. First is always opaque and has content in it. Second has 开发者_C百科content, but only on some parts. Both need to have their with and height set. On parts where 2nd div overlaps 1st, 2nd has to take priority when a Click event occurs, but where there is no content in the 2nd div, I want 1st div to receive events.

Here's a Fiddle: http://jsfiddle.net/meosoft/FQeWz/

Now if you want to click the link, it doesn't work. I'm looking preferably for a solution that does not require any changes to the existing code, but it can add any other code. Because I really need especially the dimensions to be set, without setting the dimensions on the 2nd div it works. Also, this works in IE, but not in FF or Webkit.

How would you guys solve this problem?

Try this:

$("#controls").click(function($event){
    if($event.target.id === "controls") {
        $("#content").trigger('click');
    }
});

$("#content").click(function($event){
    alert('DIV 1 clicked');
});

This fits the requirement to send the event to the first div. If you want the link to receive the event if you click that, I'm not sure because you have the divs sitting on top of eachother.