Nested float right div issue onclick

Hi all,

I've got an issue with an onClick event with 2 divs that I can't seem to sort out.

I've got 1 containing div which has a height of 92px and a width of 100%. This has an onClick event to do something. There's then a smaller div within that one which is floated right and has a width of 108px.

The right-hand div contains various links/icons however when you click anywhere within the div it's firing the onClick event from the div behind. (I don't want this happening)

The smaller div has a solid bg of white. Here's the code:

<div style="background: transparent url(http://localhost/image_path...) no-repeat scroll left top;" onclick="window.location='http://localhost/page.html';" class="outerContainer">
	<div class="rightSection">
		some content...
	</div>
</div>

HTML:

.outerContainer
{
	height:					92px;
	margin-top:				5px;
	clear:					both;
	cursor:					pointer;
}
.outerContainer .rightSection
{
	float:					right;
	background:				#fff;
	height:					92px;
	width:					108px;
	cursor:					default;
}

HTML:

Any ideas before I start headbutting the desk in frustration!?

Thanks,
Adam.

 

Actually I've managed to resolve it after much hunting. I used YUI to set the click event and then capture the event information to read which div id was actually clicked on: (note: I added the id attribute with the value "outContainer" to the previous code)

YAHOO.util.Event.onAvailable("outerContainer", function()";
{
YAHOO.util.Event.on("outerContainer", "click", loadUrl, {'newPath':'myurl.com'});
});

HTML:

function loadUrl(e, params)
{
	if((e.srcElement || e.target).id != "outerContainer")
	{
		return false;
	}
	window.location = params['newPath'];
}

HTML: