My labels and text boxes are not aligning properly, despite my efforts.
Even though this is what I want:
Here is the CSS:
.dropDownList
{
float:left;
font-size:12px;
padding:4px 2px;
border:solid 1px #aacfe4;
width:206px;
margin:2px 0 20px 10px;
}
.descriptionBox
{
font-size:12px;
padding:4px 2px;
border:solid 1px #aacfe4;
width:47em;
height:100px;
margin:2px 0 20px 10px;
}
.center
{
text-align:center;
padding:100px;
}
p, h1, form, button{border:0; margin:0; padding:0;}
.spacer{clear:both; height:1px;}
/* ----------- My Form ----------- */
.myform{
margin:0 auto;
width:50em;
padding:14px;
}
#stylized{
border:solid 2px #7fc041;
background:#FDE16D;
}
#stylized h1 {
font-size:14px;
font-weight:bold;
margin-bottom:8px;
}
#stylized p{
font-size:11px;
color:#666666;
margin-bottom:20px;
border-bottom:solid 1px #7fc041;
padding-bottom:10px;
}
#stylized label{
display:block;
font-weight:bold;
text-align:right;
width:140px;
float:left;
}
#stylized .small{
color:#666666;
display:block;
font-size:11px;
font-weight:normal;
text-align:right;
width:140px;
}
#stylized input{
float:left;
font-size:12px;
padding:4px 2px;
border:solid 1px #aacfe4;
width:200px;
margin:2px 0 20px 10px;
}
And the ASP server controls/HTML:
<div id="stylized" class="myform">
<form id="form" name="form" method="post">
<h1>
Non-Scrum Stories</h1>
<p>
<asp:RadioButtonList ID="RadioButtonList1" runat="server" OnSelectedIndexChanged="RadioButtonList1_SelectedIndexChanged"
AutoPostBack="true" RepeatDirection="Horizontal">
<asp:ListItem Selected="True">Add New</asp:ListItem>
<asp:ListItem>Update or Delete</asp:ListItem>
</asp:RadioButtonList>
</p>
<asp:Panel ID="newPanel" runat="server" Visible="true">
<label>
<asp:Label ID="Label7" runat="server" Text="Catagory:"></asp:Label>
</label>
<asp:DropDownList ID="catagoryDropDown" runat="server" DataSourceID="SqlDataSource3"
DataTextField="Catagory" DataValueField="PK_SupportCatagory" CssClass="dropDownList">
</asp:DropDownList>
<asp:SqlDataSource ID="SqlDataSource3" runat="server" ConnectionString="<%$ ConnectionStrings:ApplicationServices %>"
SelectCommand="SELECT [PK_SupportCatagory], [Catagory] FROM [SupportCatagory]">
</asp:SqlDataSource>
<label>
<asp:Label ID="label5" runat="server" Text="Date Completed:"></asp:Label>
</label>
<BDP:BasicDatePicker ID="dateInput" runat="server">
</BDP:BasicDatePicker>
<label>
<asp:Label ID="Label2" runat="server" Text="Application:" CssClass="leftFloat"></asp:Label>
</label>
<asp:DropDownList ID="applicationDropDown" runat="server" DataSourceID="SqlDataSource2"
DataTextField="AppName" DataValueField="PK_Application" CssClass="dropDownList" >
</asp:DropDownList>
<asp:SqlDataSource ID="SqlDataSource2" runat="server" ConnectionString="<%$ ConnectionStrings:ApplicationServices %>"
SelectCommand="SELECT [PK_Application], [AppName] FROM [Application]"></asp:SqlDataSource>
<label>
<asp:Label ID="Label3" runat="server" Text="Incident #:"></asp:Label>
</label>
<asp:TextBox ID="incidentInput" runat="server"></asp:TextBox>
<label>
<asp:Label ID="Label6" runat="server" Text="Hours:"></asp:Label>
</label>
<asp:TextBox ID="hoursInput" runat="server"></asp:TextBox>
<label><asp:Label ID="Label4" runat="server" Text="Description: "></asp:Label></label>
<asp:TextBox ID="descriptionInput" runat="server" Rows="10" TextMode="multiline" CssClass="descriptionBox"></asp:TextBox>
<button type="submit">
Sign-up</button>
<div class="spacer">
</div>
</form>
</div>
</asp:Panel>
I'm struggling to achieve the desired layout. What should I do?