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.

10 Years
Discussion Span
Last Post by MidiMagic

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 id="row">
<div id="col">Surname:</div>
<div id="col">
  <input type="text" name="surname" />

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


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

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.