How to format this form using only CSS

Question

Given the following HTML snippet:

<form>  
    <p>
       <label for="id_name">Name:</label> 
       <input id="id_name" maxlength="40" name="name" type="text">
    </p>

    <p>
       <label for="id_format">Format:</label> 
       <select id="id_format" name="format">
          /*options*/
       </select>
       <span>This is a description of this item</span>
    </p>
</form>

Is it possible to style this form as the attached picture: using solely css? I am aware I could format the form as a table, but the question is if this can be done exclusively with css.

The snippet is intended to show the semantics. You can assume the html of the other elements based on the snippet. The labels are in label tags, the inputs are text, select, text-area, and checkbox, etc. Each entry is in a <p> tag.

Getting the inputs all the same width, color, etc is no problem. It is the layout that is troubling me. I can't seem to position and align all of the inputs and then have the labels and spans "flow" around them.

Is it possible without touching the html?

Answer 1

The problem is that you want the form controls to be aligned, independently on the width of the label element before them.

You could achieve this easily setting a fixed width to all labels.

However, a fluid tabular approach may be more interesting.

But you don't want to align the spans in the same column. To fix it, you can float the form control before them.

form {
  display: table;
  width: 100%;
}
form > p {
  display: table-row;
}
form > p > label {
  display: table-cell;
  text-align: right;
  vertical-align: top;
  width: 0; /* Minimum width */
}
form > p > input[type="checkbox"] {
  float: left; /* To avoid aligning `span` in a column */
}
form > p > select,
form > p > textarea,
form > p > input[type="text"] {
  width: 300px; /* Same width for all */
  box-sizing: border-box; /* Fix width issues */
}
form > p > span {
  font-style: italic;
  font-size: 80%;
}

form {
  display: table;
  width: 100%;
}
form > p {
  display: table-row;
}
form > p > label {
  display: table-cell;
  text-align: right;
  vertical-align: top;
  width: 0;
}
form > p > input[type="checkbox"] {
  float: left;
}
form > p > select,
form > p > textarea,
form > p > input[type="text"] {
  width: 300px;
  box-sizing: border-box;
}
form > p > span {
  font-style: italic;
  font-size: 80%;
}

<form>
  <p>
    <label for="id_name">Name:</label>
    <input id="id_name" maxlength="40" name="name" type="text" />
  </p>
  <p>
    <label for="id_format">Format:</label>
    <select id="id_format" name="format"></select>
  </p>
  <p>
    <label for="id_type">Type:</label>
    <select id="id_type" name="type"></select>
  </p>
  <p>
    <label for="id_packs">Packs:</label>
    <select id="id_packs" name="packs"></select>
    <span>If Block, Sealed, or draft, note the associated packs/block</span>
  </p>
  <p>
    <label for="id_decklist">Decklist:</label>
    <textarea id="id_decklist" name="decklist"></textarea>
  </p>
  <p>
    <label for="id_inactive">Inactive:</label>
    <input type="checkbox" id="id_inactive" name="inactive" />
    <span>Check to hide from All Active Decks view and Registration Sector</span>
  </p>
</form>

Answer 2

For the structure, you can do:

p label {
    display: inline-block;
    padding-right: 10px;
    text-align: right;
    width: 75px;
}

p span {
    padding-left: 10px;
}

The most important section is the p label and the display: inline-block; line for your purposes. This allows the label to be displayed as an inline-level block container. The inside of this block is formatted as block-level box, and the element itself is formatted as an inline-level box.

Keep in mind that the padding values can be adjusted or removed to how you need the form styled. Same goes with the width values.