Visual Studio 2012 placing panels in web application

Question

I want to place panels horizontally, but when I drag panels they are going under or inside of the previous panel.

How can I prevent this from happening? I am new to Visual Studio so I am not sure how to do this.

Answer 1

On the markup you can do like this:

<div>
    <asp:Panel ID="leftPanel" runat="server" Style="float: left; width: 50%">
        Left Panel
    </asp:Panel>
    <asp:Panel ID="rightPanel" runat="server" Style="float: right; width: 50%">
        Right Panel
    </asp:Panel>
</div>

This is just a sample. Its always good to move the style to separate css file. If you design the things using designer, it is difficult to maintain.

When you move the style to css:

CSS:

.leftPanel
{
    float: left;
    width: 50%;
}
.rightPanel
{
    float: right;
    width: 50%;
}

Markup:

<div>
    <asp:Panel ID="leftPanel" runat="server" CssClass="leftPanel">
        Left Panel
    </asp:Panel>
    <asp:Panel ID="rightPanel" runat="server" CssClass="rightPanel">
        Right Panel
    </asp:Panel>
</div>

Later if you want to change something, you can just alter the css.