CODEWITHSUNDEEP
htmlcss
user6761804
user6761804

Reputation:

Textboxes being treated as <td> elements by css are not aligning with corresponding text

I'm trying to create three textboxes in a row, but the text that should be adjacent (to the left) to the text boxes is being pushed down so that it is to the left (but below) the text boxes. I've included the html and css.

fieldset {
  display: block;
  /*margin: 0 auto;*/
  /*text-align: center;*/
  /*margin-left: 2px;*/
  /*margin-right: 2px;*/
  padding-top: 0.35em;
  padding-bottom: 0.625em;
  padding-left: 0.75em;
  padding-right: 0.75em;
  border: 2px groove;
}


/*the .table class id was originally provided by stackoverflow, however, when using it on the fieldset
    it causes everything to be aligned to the left.
    */

.table {
  display: table;
  /*text-align: center;*/
  /*margin: 0 auto;*/
}

.tr {
  display: table-row;
}

.td {
  display: table-cell;
  text-align: left;
}

.td.right {
  text-align: right;
}
<fieldset>
  <div class="tr">
    <div class="td right">Scars, Marks, Tattoos (Describe):</div>
    <div class="td"><textarea name="susScarsEtc" rows="5" cols="20">Nothing notable.</textarea></div>
    <div class="td right">General Appearance (Describe):</div>
    <div class="td"><textarea name="susGenAppear" rows="5" cols="20">Nothing notable.</textarea></div>
    <div class="td right">Distinguishing Handicap(s) (Describe):</div>
    <div class="td"><textarea name="susHandicap" rows="5" cols="20">Nothing notable.</textarea></div>
  </div>
</fieldset>

Upvotes: 0

Views: 77

Answers (1)

Blazemonger
Blazemonger

Reputation: 92893

Add vertical-align: top; to your td styles (and add class="table" to your fieldset).

fieldset {
  display: block;
  /*margin: 0 auto;*/
  /*text-align: center;*/
  /*margin-left: 2px;*/
  /*margin-right: 2px;*/
  padding-top: 0.35em;
  padding-bottom: 0.625em;
  padding-left: 0.75em;
  padding-right: 0.75em;
  border: 2px groove;
}


/*the .table class id was originally provided by stackoverflow, however, when using it on the fieldset
    it causes everything to be aligned to the left.
    */

.table {
  display: table;
  /*text-align: center;*/
  /*margin: 0 auto;*/
}

.tr {
  display: table-row;
}

.td {
  display: table-cell;
  text-align: left;
  vertical-align: top;
}

.td.right {
  text-align: right;
}
<fieldset class="table">
  <div class="tr">
    <div class="td right">Scars, Marks, Tattoos (Describe):</div>
    <div class="td"><textarea name="susScarsEtc" rows="5" cols="20">Nothing notable.</textarea></div>
    <div class="td right">General Appearance (Describe):</div>
    <div class="td"><textarea name="susGenAppear" rows="5" cols="20">Nothing notable.</textarea></div>
    <div class="td right">Distinguishing Handicap(s) (Describe):</div>
    <div class="td"><textarea name="susHandicap" rows="5" cols="20">Nothing notable.</textarea></div>
  </div>
</fieldset>

Upvotes: 1

Related Questions