How to align buttons properly in css/asp.net?

Question

I'm trying to align 2 sets of buttons to the panel in the div above. The buttons called but1, but2 for the left panel. The others are but1, but2, but3 right panel. At the moment the buttons are in a straight line under the 2 panels. So I would like the 2 left buttons right under the left panel aligned left. The 2 right buttons right under the right panel align left?

HTML:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style>
        div.input
        {
            clear: left;
            margin: 0 0 0.2em;
            padding: 6pt 1em;
        }

        .flclass
        {
            float: left;
        }

        .imageDetails
        {
            color: Gray;
            line-height: 1.2;
            margin: 34px 0 0 10px;
        }

        input.special
        {
            background: none repeat scroll 0 0 #913297;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div class="input">
        <label>
            panel 1</label>
        <asp:Panel CssClass="flclass" ID="pnlcustomerImage" runat="server" Style="background-color: #DDDDDD;
            border: solid 1px black; vertical-align: middle; text-align: center; padding: 0"
            Width="200px" Height="70px">
            <asp:Literal ID="lt1" runat="server" Text="Panel left" />
            <asp:HyperLink ID="hl1" runat="server" Target="_blank">
                <asp:Image ID="im1" runat="server" Visible="false" Width="200px" Height="70px" AlternateText="Contact Admin to change your image" /></asp:HyperLink>
        </asp:Panel>
        <div class="flclass">
            <p class="imageDetails">
                <asp:Literal ID="lt4" Text="what to write here?" runat="server" />
            </p>
        </div>
        <label>
            small image</label>
        <asp:Panel CssClass="flclass" ID="pnlAgentSmallLogo" runat="server" Style="background-color: #DDDDDD;
            border: solid 1px black; vertical-align: middle; text-align: center;" Width="120px"
            Height="42px">
            <asp:Literal ID="lt2" runat="server" Text="Panel right" />
            <asp:HyperLink ID="hl2" runat="server" Target="_blank">
                <asp:Image ID="im2" runat="server" Visible="false" Width="120px" Height="42px" AlternateText="Contact Admin to change your image" /></asp:HyperLink>
        </asp:Panel>
        <p class="imageDetails" style="margin-top: 5px">
            <asp:Literal ID="lt3" Text="what to write here?" runat="server" /></p>
        <div class="input" style="margin: top">
            <label>
            </label>
            <asp:Button ID="btn1" runat="server" Text="but1 left" CssClass="special" Style="margin-top: 54px;
                margin-left: 10px" />
            <asp:Button ID="btn2" runat="server" Text="but2 left" CssClass="special" Style="margin-top: 54px;
                margin-left: 10px" Visible="true" />

            <asp:Button ID="btn3" runat="server" Text="but1 right" CssClass="special" Style="margin-top: 26px;
                margin-left: 10px" />
            <asp:Button ID="btn4" runat="server" Text="but2 right" CssClass="special" Style="margin-top: 26px;
                margin-left: 10px" Visible="true" />
            <asp:Button ID="btn15" runat="server" Text="but3 right" CssClass="special"
                Style="margin-top: 26px; margin-left: 10px" Visible="true" />
        </div>
    </div>
    </form>
</body>
</html>

Prince Antony G · Accepted Answer · 2011-12-13 05:26:06Z

7

Change ur code

 <asp:Button ID="btn3" runat="server" Text="but1 right" CssClass="special" Style="margin-top: 26px; margin-left: 150px" />

set margin-left: 150px in btn3

answered Dec 13, 2011 at 5:26

Prince Antony G

9324 gold badges18 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user603007 Over a year ago

I also want it closer to the bottom of the panels. Now it is still way to far from it

showdev · Accepted Answer · 2016-07-28 17:03:39Z

1

For future viewers, I found that this works better:

<asp:Button ID="btn3" runat="server" Text="but1 right"
    CssClass="special" Style="margin-left:auto; display:block;" />

That way, if you change the width of your button, you don't have to do math to figure out the margin size.

edited Jul 28, 2016 at 17:03

showdev

29.3k37 gold badges61 silver badges82 bronze badges

answered Jan 10, 2014 at 22:35

adeptmatty

111 bronze badge

1 Comment

iandotkelly Over a year ago

What way works better? Is this a comment on the other answer?

Collectives™ on Stack Overflow

How to align buttons properly in css/asp.net?

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related