I am attempting to achieve a layout similar to this:
However, what I am getting looks like this:,
I am struggling to figure out how to make changes to my HTML. I want to position the buttons in the correct places and align the dropdown with the other textboxes.
The stylesheet I have written is as follows:
<style type="text/css">
div.label-wrapper {
position: relative;
min-width: 300px;
max-width: 400px;
height: 24px;
display: block;
}
div.label-wrapper > label {
position: absolute;
left: 0;
width: 100px;
text-align: left; /* not absolutely necessary, but will be if you assign a width to the label */
white-space: nowrap; /* Again, not totally necessary, but if you run out of space otherwise you'll get multiple lines for your label */
}
div.label-wrapper > input[type=text] {
position: absolute;
left: 115px; /* Leaves a 15px gap between end of label and start of textbox. Increase value if you want more than 15px or decrease if you want less */
}
div.label-wrapper > input[type=submit] {
position: absolute;
left: 115px; /* Leaves a 15px gap between end of label and start of textbox. Increase value if you want more than 15px or decrease if you want less */
}
</style>
And here is the HTML:
<div>
<div class='label-wrapper'>
<asp:Label ID="Label1" runat="server" Text="Staff ID :"></asp:Label>
<asp:TextBox ID="staffID" runat="server" Width="150px"></asp:TextBox>
</div>
<div class='label-wrapper'>
<asp:Label ID="Label2" runat="server" Text="Name :"></asp:Label>
<asp:TextBox ID="staffname" runat="server" Width="300px"></asp:TextBox>
</div>
<div class='label-wrapper'>
<asp:Label ID="Label3" runat="server" Text="Surname :"></asp:Label>
<asp:TextBox ID="StaffSurname" runat="server" Width="300px"></asp:TextBox>
</div>
<div class='label-wrapper'>
<asp:Label ID="Label5" runat="server" Text="Email Address :"></asp:Label>
<asp:TextBox ID="email" runat="server" Width="423px"></asp:TextBox>
</div>
<div class='label-wrapper'>
<asp:Label ID="Label4" runat="server" Text="Research Areas of Expertise :"></asp:Label>
<asp:CheckBoxList ID="ResearchAreasList" runat="server" RepeatLayout="Flow" Width="230px">
<asp:ListItem>Information Systems</asp:ListItem>
<asp:ListItem>User Interfaces</asp:ListItem>
<asp:ListItem>Problem Solving</asp:ListItem>
<asp:ListItem>3D Graphics</asp:ListItem>
<asp:ListItem>Computing Education</asp:ListItem>
<asp:ListItem>Mobile Computing</asp:ListItem>
</asp:CheckBoxList>
</div>
<div class='label-wrapper'>
<p>
<span class="art-button-wrapper">
<span class="art-button-l"></span>
<span class="art-button-r"></span>
<asp:Button ID="Button1" runat="server" CssClass="art-button" Text="Save" OnClick="Button1_Click" />
</span>
</p>
<p>
<span class="art-button-wrapper">
<span class="art-button-l"></span>
<span class="art-button-r"></span>
<asp:Button ID="Button2" runat="server" CssClass="art-button" Text="Cancel" />
</span>
</p>
</div>
</div>