9

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>
3
  • This is most likely the result of the generated html and the containing div (as opposed to the panel tag). If you inspect the rendered page, and maybe post the html that gets generated, we can probably figure this one out pretty quickly.
    – Rich
    Sep 25, 2009 at 17:13
  • I don't need to use a div here if that helps a bit.
    – Xaisoft
    Sep 25, 2009 at 17:15
  • I also took the div out and it still displayed it on two separate lines.
    – Xaisoft
    Sep 25, 2009 at 17:16

2 Answers 2

16

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.

0
1

asp:Panel will render as a DIV, check out this answer and see if it works

1
  • try adding a br with ClearBoth after your second panel
    – roman m
    Sep 25, 2009 at 17:26

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.