In my HTML, I am struggling with the alignment of a 'row' div that contains a label, text input, and hyperlink. The issue arises when I try to make the width of the input always fill the available space between the label and the hyperlink. Despite multiple attempts, I have not been successful in achieving the desired layout. It seems like using some clever margin adjustments could solve the problem by preventing the a tag from being absolute, thus allowing the input to fit neatly between the label and the a. However, I am now uncertain about what else to attempt.
The following is my HTML code:
<fieldset id="ctl00_cph_previousContacts" class="previousContactsArea">
<legend>Previous Contacts</legend>
<div class="email-row">
<label for="ctl00_cph_addressTo">To</label>
<input name="ctl00$cph$addressTo" type="text" id="ctl00_cph_addressTo" class="email-address text" />
<a href="#" id="ctl00_cph_addToAddressTo">Add...</a>
<span id="ctl00_cph_addressToValidator" dynamic="True" style="display:none;"></span>
</div>
</fieldset>
Below is the corresponding CSS:
.manualNotification #recipientsTab .email-row {
margin-top: 5px;
margin-bottom: 5px;
}
.manualNotification #recipientsTab .email-row label {
display: inline-block;
width: 50px;
text-align: center;
}
.manualNotification #recipientsTab .email-row a {
position: absolute;
width: 50px;
right: 10px;
margin-left: 10px;
}