Member Avatar for ryy705

Hello,
Is there a way to create a grid-like form with CSS? Meaning, I would like the label and input fields to be equidistant from one another. It naturally happens if I use tables but is there a way to achieve the same effect with CSS?
Floating label elements to the left and floating input elements to the right does quite achieve the same effect. Can't find a relevant solution by googling, many thanks in advance.

  • 3 Contributors
  • 2 Replies
  • 111 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by MidiMagic

Dani AI

Generated

asked for evenly spaced label/input pairs. 's float trick works in simple cases, and is correct that tables are sometimes valid — but a modern, robust approach uses CSS Grid (or Flexbox) for predictable alignment, responsiveness, and accessibility.

A compact Grid example that keeps labels in one column and inputs in the other:

form {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.5rem 1rem;
  align-items: center;
}

label {
  justify-self: end; /* keeps labels right-aligned in the left column */
}

/* small screens: stack label above control */
@media (max-width: 600px) {
  form { grid-template-columns: 1fr; }
  label { justify-self: start; }
}

HTML pairs are simple: each label followed by its control (no extra wrapper divs required). For multi-column forms, repeat the pattern: grid-template-columns: repeat(2, max-content 1fr); lets two label/control pairs share a row.

A Flexbox alternative for single-row alignment (useful when each field is its own row):

.field-row {
  display: flex;
  align-items: center;
}

.field-row label {
  width: 160px; /* consistent label column */
  text-align: right;
  margin-right: 0.75rem;
}

.field-row input { flex: 1; }

Accessibility and troubleshooting notes: always pair label and input with for/id, use fieldset/legend for logical groups, and test with long label text (use minmax() or a fixed label width for consistent columns). CSS Grid is widely supported in modern browsers; Flexbox is a good fallback for older environments. Further reading: CSS Grid and .

Recommended Answers

All 2 Replies

Member Avatar for macneato

Hi ryy705,

You will have to use CSS to achieve what you want. A example would be;

#col {width:250px;float:left;margin:2px;}
	
#row {width:100%; margin:2px}

And your html will be as follows:

<form action="ac_contact.php" method="post">
<div id="row">
<div id="col">Name:</div>
<div id="col">
  <input type="text" name="name" />
</div>
</div>
<div id="row">
<div id="col">Surname:</div>
<div id="col">
  <input type="text" name="surname" />
</div>
</div>
</form>

Very easy to understand. But if you having any problems, Just shout.

Member Avatar for MidiMagic

This is a proper use of tables.

Tables are not deprecated. What W3C wanted to stop the wrong use of tables for is using them to create margins, borders, or padding (which was done by web authors before those styles existed).

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.