UpdatePanel with asyncpostback trigger doesn't work correctly and causes weird behavior

There is something strange happening here. I currently have a drop down drpIntervention that has autopostback="true" and up until now I was calling server code, to disable/enable controls depending on what the selected value is. I'm not likeing the flickering with postbacks so I'm trying to wrap the code in UpdatePanel with AsyncPostBack Trigger but strange things are happening:

This is what code looks like for this update panl:

     <asp:UpdatePanel ID="UpdatePanel5" runat ="server" UpdateMode ="Conditional">
      <ContentTemplate >
        <tr>
         <td colspan="3" class="questionFont">
          <table style="width:100%; border-collapse:collapse ">
          <tr>
            <td>
              <b>a.&nbsp;What is the Problem?</b>
            </td>
            <td >
             <asp:DropDownList ID="drpCrisisType" runat="server" autopostback="true" Enabled ="false" OnSelectedIndexChanged="drpCrisisType_SelectedIndexChanged ">
             </asp:DropDownList>
             <span runat="server" style="font-size:12px;  font-family :'Times New Roman';" ID="Span16"><i>(Description)</i></span>
            </td>
         </tr>                                    
   </ContentTemplate>
       <Triggers>  
          <asp:AsyncPostBackTrigger ControlID="drpIntervention" EventName="SelectedIndexChanged" />
       </Triggers>
   </asp:UpdatePanel>

and this is code for the button that's supposed to trigger the Event, which is outside the updatePanel

  <tr>
     <td class="questionFont" style="padding-top: 20px">
       <b>4.&nbsp;Did you engage in any?</b>
     </td>
     <td style="padding-top: 20px">
        <asp:DropDownList ID="drpIntervention" runat="server" autopostback="true"  OnSelectedIndexChanged="drpIntervention_SelectedIndexChanged ">
        </asp:DropDownList>
     </td>
   </tr>

So this is not my entire code, the <tr> belongs to a table, that has many more above it, this update panel and drop down are just a part of it. What's happening is, I load the page in browser and everything looks good, then I select a value in drpIntervention and the content (other dropdowns, and textboxes that have server code for enabling/disabling) that is wrapped in update panel gets moved above other content in the page. Even stranger, is that the content that gets moved works correctly without doing the postback, however the content is also in its original place and it doesn't work there.

I hope I'm making sense, the content in update panel is literally in 2 places on the page as soon as I select a value from drpIntervention. Mind blown!

Solution

I believe the issue had to do with where I was putting the asp:update panel. Since I was putting it inside the table, it was somehow was overriding the formatting and bringing the content within the update panel to top of the the table.

What solved the issue is when I created a table for this questions, and wrapped the entire table with the asp:update panel. This resolved the issues