Question

I’m trying to get a form horizontaly aligned, like it would be if I was using tables:

<form>
<table>
  <tr>
    <td style="width:30%"><label for="field1">Field1 Title:</label></td>
    <td><input type="text" id="field1" /></td>
  </tr>
  <tr>
    <td>Are you sure?</td>
    <td>
      <label for="sure_yes"> Yes </label><input type="radio" id="sure_yes" />&nbsp;
      <label for="sure_no"> No </label><input type="radio" id="sure_no" />
    </td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td><input type="submit" value="Confirm" /></td>
  </tr>
</table>
</form>

I can define the generic css as block- displayed like this:

form label{
display:block;
float:left;
width:200px;
margin:5px 0;
clear:left;
}
form input, form textarea, form select{
display:block;
margin:5px 0;
clear:right;
float:left;
}

And in this case my HTML would look like this:

<form>
  <label for="field1">Field1 Title:</label>
  <input type="text" id="field1" />
  Are you sure?
  <label for="sure_yes"> Yes </label><input type="radio" id="sure_yes" />&nbsp;
  <label for="sure_no"> No </label><input type="radio" id="sure_no" />
  <input type="submit" value="Confirm" />
</form>

But of course this system won’t work for my way of displaying radios and submit. I can fix this with a javascript function, but I wonder if there would be a pure css solution – and cross-browsers.

Answer 1

The solution is here: http://jsfiddle.net/gS86P/

The problem you had was you were trying to float the items. Instead I used inline-block and a row div to make them act similarly to a table, each row of the table in a separate row div.