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>
Change ur code
set margin-left: 150px in btn3