ASP.net Change Panels to sit side by side rather than one under the other

Murray Brown
Murray Brown used Ask the Experts™
on
Hi. I am using the following markup for two calendars. They have to each be on their panel for my functionality to work.
They currently sit one under the other. How do I get them to sit side by side?

1
   <asp:Panel ID="PanelFromDate" runat="server" onclick="PanelFromDateClick2();">           
       <asp:Image ID="Image1" runat="server" Height="40px" ImageUrl="~/Resources/CalendarIcon.png" Width="40px" />
            <br />
            <asp:Label ID="lblFromDate" runat="server"></asp:Label>        
   </asp:Panel>

       <asp:Panel ID="PanelToDate" runat="server" onclick="PanelToDateClick2();">
            <asp:Image ID="Image2" runat="server" Height="40px" ImageUrl="~/Resources/CalendarIcon.png" Width="40px" />
                   <br />
            <asp:Label ID="lblToDate" runat="server"></asp:Label>  
            &nbsp;&nbsp;
            <asp:Label ID="lblDateError" runat="server" ForeColor="Red"></asp:Label>
        </asp:Panel>

Open in new window

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Developer User Interface
Commented:
A asp:Panel tag is goin to render a div tag, and it’s goin to be below one another.

Try to put an enclosing div and see what happens.

<div>
<asp:Panel id=“PanelFromDate”>

<asp:Panel id=“PanelToDate” Horizontal-Align=“Right”>
</div>

Open in new window

Murray BrownASP.net/VSTO Developer

Author

Commented:
thanks but that doesn't work
Murray BrownASP.net/VSTO Developer

Author

Commented:
what about two floating divs in that div
Murray BrownASP.net/VSTO Developer

Author

Commented:
<div style="width:100%;"> <!-- Main Div -->

        <div style="float:left; width:100px;">

             <asp:Panel ID="PanelFromDate" runat="server" onclick="PanelFromDateClick2();">           
      
                   <asp:Image ID="Image1" runat="server" Height="40px" ImageUrl="~/Resources/CalendarIcon.png" Width="40px" />
                        <br />
                   <asp:Label ID="lblFromDate" runat="server"></asp:Label>        
             
             </asp:Panel>
        </div>
       
       <div style="float:left; width:100px; margin-left:10px;">
      
            <asp:Panel ID="PanelToDate" runat="server" onclick="PanelToDateClick2();">
              <asp:Image ID="Image2" runat="server" Height="40px" ImageUrl="~/Resources/CalendarIcon.png" Width="40px" />
                   <br />
              <asp:Label ID="lblToDate" runat="server"></asp:Label>  
              &nbsp;&nbsp;
             
           </asp:Panel>

        </div>
   </div>

Open in new window

Murray BrownASP.net/VSTO Developer

Author

Commented:
all working. Thanks for the <div> idea

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial