form inline

[cablos]

Salve, premetto che sono digiuno di css, volevo qualche aiuto su come creare un form come questo
form.jpg
solo per quanto riguarda la disposizione inline degli elementi e descrizioni.
saprei più o meno ricrearlo rozzamente con le tabelle, ma necessito ricrearlo con soli div,label...

grazie
ps. non saprei da dove iniziare

[Mich_]

Per iniziare ...

Presumo che il tuo HTML ti dia i blocchi da sinistra a destra e dall'alto in basso (come si scrive)

Quindi il tuo schema e` organizzato in elementi che saranno larghi 24.9% e saranno flottati a sinistra.
Ogni blocco avra` due (o piu`) linee.

Il codice HTML dovrebbe essere del tipo:

<form ...>
  <fieldset>
    <legend for="mname">Middle Name</legend>
    <input id="mname" type="text" />
  </fieldset>
  <fieldset>
    <legend for="fname">First Name</legend>
    <input id="fname" type="text" />
  </fieldset>
.....
  <fieldset>
    <legend for="city">City</legend>
    <input id="city" type="text" />
  </fieldset>
  <fieldset class="comment">
    <legend for="comments">Comments</legend>
    <textarea>
    </textarea>
  </fieldset>
</form>

A questo punto il CSS e` relativamente semplice

html, body {
  width: 100%;
  font-size: 100%;
  ...
}
form {
  width: 100%;
  min-width: 180em;  /* se lo spazio e` troppo poco, forza lo scrolling orizzontale */
  ...
}
fieldset {
  width: 24.9%;
  float: left;
  padding: 3px;
}
fieldset.comment {
  width: 49.9%;
  clear: left;         /* forza nuova riga */
}

legend {
  font: ...
  ...
}
input, textarea {
  font: ...
  width: 100%;
  border: ...
  display: block;   /* lo rende blocco, quindi va a capo */
}