CODEWITHSUNDEEP
htmlcss
ProfK
ProfK

Reputation: 51063

Make text input fill available space between two other elements in one row

I have a 'row' div that contains, essentially, a label, then a text input, then a hyperlink. My problem here is I wish the width of the input to always fill the available width between the label and the hyperlink. I have tried numerous approaches, but with only varied forms of failure. I suspect maybe I can use some sort of margin voodoo to make the a tag not absolute, and always have the input neatly bounded by the lable and the a, but I am now at a complete loss as to what to try next.

Here is my HTML:

<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>

And here is the 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;
}

Upvotes: 1

Views: 322

Answers (2)

Omar
Omar

Reputation: 527

please add flowing css end of your css:

div.email-row{max-width: 30%; float:left;margin-right:20px}

see the following links for more details: http://www.cssdesk.com/gDzpd

Upvotes: 0

Paulie_D
Paulie_D

Reputation: 114990

Flexbox can do that

.email-row {
  margin-top: 5px;
  margin-bottom: 5px;
  display: flex;
}
.email-row label {
  flex: 0 0 50px;
  text-align: center;
}
.email-row input {
  flex: 1;
}
.email-row a {
  flex: 0 0 50px;
  margin-left: 10px;
}
<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>

JSfiddle Demo

Upvotes: 2

Related Questions