Question

The markup below displays the panels one below the other. What I would like to do is display them right next to each other. Here is the markup:

<div>
    <asp:Panel ID="pnlA" runat="server">
        <img src="../images/A.png" /> 
        <asp:Literal ID="litA" runat="server" Text="A"></asp:Literal>
    </asp:Panel>
    <asp:Panel ID="pnlB" runat="server">
        <img src="../images/B.png" /> 
        <asp:Literal ID="litB" runat="server" Text="B"></asp:Literal>
    </asp:Panel>
</div>

The above currently displays it like so:

Image A

Image B

When in fact, I would like it like Image A Image B

The HTML rendered is pretty much the same as above, but the Panels are rendered as divs, so the structure without everything inside is:

<div>
    <div></div>
    <div></div>
<div>

Answer 1

A Panel renders in HTML as a div. The easiest way is to just use CSS to override the default behavior of divs.

<asp:Panel ID="pnlA" runat="server" style="display:inline;">
    <img src="App_Themes/TicketDeskTheme/file.gif" /> 
    <asp:Literal ID="litA" runat="server" Text="A"></asp:Literal>
</asp:Panel>
<asp:Panel ID="pnlB" runat="server" style="display:inline;">
    <img src="App_Themes/TicketDeskTheme/file.gif" /> 
    <asp:Literal ID="litB" runat="server" Text="B"></asp:Literal>
</asp:Panel>

This example uses the style attribute, which gets passed on straight to the HTML. You can use CssClass if you prefer to do it in a reusable stylesheet of course.