Align elements in a fieldset

Question

I'm trying to align a combination of labels and inputs. Currently using a fieldset > table > tr > td structure. I've read online that this is typically poor practice, however, I'm having a very difficult time using CSS to accomplish the look I need.

Here is a sample:

td.right {
  text-align: right;
}

fieldset {
  display: block;
  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;
}

<fieldset>
  <table>
    <tr>
      <td class="right">Date of Call:</td>
      <td><input class="datepicker2" name="callDate"></td>
      <td class="right">Caller code Number:</td>
      <td><input class="CodeMaker" name="callerCodeNum"></td>
      <td class="right">What is the jurisdiction?</td>
      <td><input type="text" name="jurisdiction"></td>
    </tr>
    <tr>
      <td class="right">Date of Offense:</td>
      <td><input class="datepicker2" name="crimeDate"></td>
      <td class="right">Time of Offense:</td>
      <td><input class="timePicker?" name="crimeTime"></td>
      <td class="right">Number:</td>
    </tr>
  </table>
</fieldset>

This renders nicely with the table formatting (3 label/input combinations for the first row, and 3 label/input combinations for the second row). There are basically 3 columns.

Any input would be much appreciated.

Welcome to StackOverflow! Thanks for providing your existing HTML, but could you please provide your existing CSS as well; we can't reproduce your problem without it. Please update your question so that it shows your **existing CSS**, along with your **desired outcome**, thus forming a [**minimal, complete, and verifiable example**](http://stackoverflow.com/help/mcve). For further information, please refer to the help article regarding [**how to ask good questions**](http://stackoverflow.com/help/how-to-ask), and take the [**tour of the site**](http://stackoverflow.com/tour) :) — Obsidian Age, Sep 11 '17 at 22:34
The only styling I have is for the td elements and fieldset elements: td.right{ text-align: right; } fieldset { display: block; 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; } — , Sep 11 '17 at 23:54
BTW, thank you for your prompt response. I have it set up to notify (by email) of responses, however I don't seem to have receive a notification. The above "Run code snippet" seems to be rendering fairly closely to what I'm trying to accomplish. — , Sep 12 '17 at 00:02
I didn't add anything special to the above snippet; I simply added the CSS you wrote as a comment to your existing HTML. That should be the display you **already have**. Please edit your question to clearly specify your **desired outcome**, and how the above snippet **differs** from the desired outcome -- otherwise you don't have a question. — Obsidian Age, Sep 12 '17 at 00:32

itodd · Accepted Answer · 2017-09-13T23:55:16.407

You can replicate a table using CSS with the display property and values table table-row table-cell etc.

There are a number of reasons why it is bad practice to use tables for your layout. A quick search will return dozens of articles on this issue.

I see the main reasons as: Table layouts are not semantic; if you are not displaying tabular data, don't use a table. Table layouts are not accessible - users using a screen reader will not be happy. Once you get used to CSS to provide the styling to your layout you will find it much easier to maintain.

fieldset {
  display: block;
  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;
}

.table {
  display: table;
}

.tr {
  display: table-row;
}

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

.td.right {
  text-align: right;
}

<fieldset class="table">
  <div class="tr">
    <div class="td right">Date of Call:</div>
    <div class="td"><input class="datepicker2" name="callDate"></div>
    <div class="td right">Caller code Number:</div>
    <div class="td"><input class="CodeMaker" name="callerCodeNum"></div>
    <div class="td right">What is the jurisdiction?</div>
    <div class="td"><input type="text" name="jurisdiction"></div>
  </div>
  <div class="tr">
    <div class="td right">Date of Offense:</div>
    <div class="td"><input class="datepicker2" name="crimeDate"></div>
    <div class="td right">Time of Offense:</div>
    <div class="td"><input class="timePicker?" name="crimeTime"></div>
    <div class="td right">Number:</div>
  </div>
  <div class="tr">
    <div class="td right">Date of Call:</div>
    <div class="td"><textarea rows="5" cols="15"></textarea></div>
    <div class="td right">Caller code Number:</div>
    <div class="td"><textarea rows="5" cols="15"></textarea></div>
    <div class="td right">What is the jurisdiction?</div>
    <div class="td"><textarea rows="5" cols="15"></textarea></div>
  </div>
</fieldset>

Awesome! This is exactly what I was looking for. Thanks a heap itodd!! — , Sep 13 '17 at 16:59
Okay, so I ran into a problem. By implementing the change you provided, the elements are now floating left. I tried using css to keep the elements centered (per: https://stackoverflow.com/questions/7898072/center-a-field-set-with-css) (using margin: 0 auto;) however it still floats left. I commented out the margin-left and margin-right settings in the original css but still no luck. Thoughts? — , Sep 13 '17 at 17:12
Okay, so by changing
to simply
the alignment issue resolved. — , Sep 13 '17 at 17:22
Okay, so now I'm running into an issue. 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. — , Sep 13 '17 at 17:54
@StackBoy if you feel this answer is helpful and answers your question feel free to upvote and accept the answer. To fix your alignment issue with `textarea` you need to use `vertical-align: top;`. Check out the updated code in my answer — itodd, Sep 13 '17 at 23:56

Align elements in a fieldset

1 Answers1