How can I display two asp:Panel controls side by side?

Question

I have two panels. I want to show them abreast, but they don't.

.aspx:

<asp:Panel ID="treeviewMenu" Width="20%" Height="500" runat="server" ScrollBars="Both" HorizontalAlign="Left">
    <asp:TreeView ID="treeview" runat="server" ShowLines="True" ImageSet="XPFileExplorer" OnSelectedNodeChanged="treeview_SelectedNodeChanged">
    </asp:TreeView>
</asp:Panel>

<asp:Panel ID="qvObjektMenu" Width="75%" Height="500" runat="server"  HorizontalAlign="Right">
    <asp:Table runat="server" HorizontalAlign="Right">
        <asp:TableRow>
            <asp:TableCell>
                <asp:Label runat="server">
                    QVObjekt Id:
                </asp:Label>
            </asp:TableCell>
            <asp:TableCell>
                <asp:Label ID="qvObjektId" runat="server"></asp:Label>
            </asp:TableCell>
        </asp:TableRow>
    </asp:Table>
</asp:Panel>

I have used a table outside this two elements, another Panel around them, nothing works. How can I resolve this?

Answer 1

The answer here is CSS. There are a few options for how to do it in CSS.

Option 1: display:inline-block;

One option for that css is to use display: inline-block;:

<style type="text/css">
   .inlineBlock { display: inline-block; }
</style>

Coupled with setting it in the <asp:Panel ...> tags:

<asp:Panel ID="treeviewMenu" ... CssClass="inlineBlock">
    ...
</asp:Panel>

<asp:Panel ID="qvObjektMenu" ... CssClass="inlineBlock">
    ...
</asp:Panel>

Option 2a: float:left;

Another option, as mentioned in Wim's answer is to use floats. But I do not think you want to combine both panels to have floats -- I suspect you only want one or the other. Either:

<style type="text/css">
.floatLeft { float: left; }
</style>

And

<asp:Panel ID="treeviewMenu" ... CssClass="floatLeft">
    <asp:TreeView ID="treeview" runat="server" ShowLines="True" ImageSet="XPFileExplorer" >
    </asp:TreeView>
</asp:Panel>

(with the other panel as it currently is in your markup)

OR

Option 2b: float:right;

<style type="text/css">
.floatRight { float: right; }
</style>

And

 <asp:Panel ID="qvObjektMenu" ... CssClass="floatRight">
    ...
</asp:Panel>