The CalendarExtender control is causing elements to be repositioned after it pops up.  After pop up, the elements stay in the new position.

I have two span's side by side.  I have text box and to the right of the text box, I have a button.  The reason I have the span's is because I use them to dynamically show/hide the text box.  When the calendar pops up, the button is moved under the text box.  I don't want this to happen, I want them to stay side by side. 

<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
    
<span>
   Date: <asp:TextBox ID="DateTextBox" runat="server" />

   <ajax:CalendarExtender ID="CalendarExtender2" runat="server"
            TargetControlID="DateTextBox">
   </ajax:CalendarExtender>
</span>        


<span>
  <asp:Button ID="SearchButton" runat="server" Text="Search" />
</span>        

 I notice if I remove the first span tag, then it actually works as desired, but then I can't dynamically show/hide that section.

1. Any ideas on why is this happening?

2. How can I get this to work?
 

Hi

Im not sure why ,

but you can use html table ,

<table>
<tr> 
<td style=" width:100px; "> 
Date:
</td>
<td style=" width:300px ;">
 <asp:TextBox ID="DateTextBox" runat="server" />
   <ajax:CalendarExtender ID="CalendarExtender2" runat="server"
            TargetControlID="DateTextBox">
   </ajax:CalendarExtender>
</td>
</tr>
<tr>
<td> 
  <asp:Button ID="SearchButton" runat="server" Text="Search" />
</td>
<td></td>
</tr>
</table>

      

 I don't like the idea of using a table, but your idea works which is the most important thing, and it hadn't crossed my mind to use a table.