asp.net calendar control appears below textfield

Question

I ma using an image button to display an asp.net calendar control (this control comes with VS 2008). However, when I click the image button, the calendar controls is displayed "below" the textfield that it is suppoed to populate. How can I get the control to appear on the right side of the textfield?

My code is:

                         <asp:ImageButton ID="imgCalendar" runat="server" Height="17px" 
                         ImageUrl="~/Images/CAL.gif" 
                         onclick="imgCalendar_Click1" Width="19px" 
                         Visible="true" ImageAlign="Middle" />
                     <asp:Panel ID="Panel1" runat="server">
                         <asp:Calendar ID="calStartDate" runat="server" BackColor="Transparent" 
                             BorderColor="#FFCC66" BorderWidth="1px" DayHeaderStyle-BackColor="gainsboro" 
                             DayNameFormat="Shortest" FirstDayOfWeek="Monday" Font-Bold="True" 
                             Font-Names="Verdana" Font-Size="8pt" ForeColor="Gray" Height="102px" 
                             OnSelectionChanged="calStartDate_SelectionChanged" 
                             OtherMonthDayStyle-ForeColor="gray" SelectedDayStyle-BackColor="Navy" 
                             SelectedDayStyle-Font-Bold="True" SelectorStyle-BackColor="gainsboro" 
                             ShowGridLines="True" TitleStyle-BackColor="gray" TitleStyle-Font-Bold="True" 
                             TitleStyle-Font-Size="12px" TodayDayStyle-BackColor="gainsboro" Visible="False" Width="62px">
                             <SelectedDayStyle BackColor="#404040" Font-Bold="True" />
                             <TodayDayStyle BackColor="#3A080B" ForeColor="White" />
                             <SelectorStyle BackColor="#FFCC66" />
                             <OtherMonthDayStyle ForeColor="#CC9966" />
                             <NextPrevStyle Font-Size="9pt" ForeColor="#3A080B" />
                             <DayHeaderStyle BackColor="#3A080B" Font-Bold="True" Height="1px" ForeColor="White" />
                             <TitleStyle BackColor="#E0C16B" Font-Bold="True" Font-Size="9pt" ForeColor="#3A080B" />
                         </asp:Calendar>
                     </asp:Panel>

Answer 1

Off the top of my head, I'd suggest that you set the CssClass property of the asp:Panel and position it using CSS. The HTML generated by the control likely renders block level elements (either <div> or <table> most likely) which will cause it to display on a new line by default.

Try using display: inline or display: inline-block or using float to position it.

Depending on the way you've styled your textbox, you may need to modify it's styles too to accommodate the positioning of the calendar.

Answer 2

Add style="float:right" to the textbox.