Update Panel and Update progress in ASP.net

I was working on UpdatePanel and UpdateProgress controls in the ASP.net Ajax extensions.


My requirement was simple : I wanted a list of icons or image buttons on the left hand side, which when clicked would display some relevant content on the right hand side update panel asynchronously.


So I had a script manager under which I have an update panel in one div tag.
And the left side panel in a separate div tag.


Something like this:

So that when I click on "button1" it will display some content in the update panel and when I click on "button2" it will fetch some different content using AJAX and display it.


It worked fine with a code behind in button click events.


However, I thought I should display the UpdateProgress once the user clicks on the buttons. 
like "Please wait..." or "Updating..." with a ".gif" image ...


So I added the UpdateProgress inside the panel in a div tag like this :

<div id="divWait" style="font-size: large; position: absolute; left: 600px; top: 400px;">

<asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1"

DisplayAfter="100" DynamicLayout="true">

  <ProgressTemplate>

      <div>

       <img border="0" src="./ig_res/Default/images/ig_progressIndicator.gif" />

         Please wait...

      div>

  ProgressTemplate>

 asp:UpdateProgress>

div>

Turns out this does not work !!

I read lot of forums and stuff online but could not find a solution.

Then all I did was get the button inside the update panel and it started working !!

I am yet to find a solution to the problem ... can I not have buttons outside the Update Panel and have the Update Progress control working??