Trying to created a tabled layout won't work with CSS

Question

Hello, I'm trying to recreate a sort of table layout of a contact form.

Here's the current form: http://www.radonsystems.net/contact-us

and this is what the work-in-progress is like

http://www.radonsystems.net/newsite/?do=contact-us

As you can see, there is an issue with the second form - I just don't know how to fix it.

Any ideas on what I'm doing wrong?

The style (CSS) for that part, is nearly 100% copied over, only that I've changed the font, but kept within same family.

Answer 1

Try out float: left; instead of float: right; on your contact-input My testing aligns it all properly.

before

.contact-input 
{
    border:1px dashed black;
    display:table-cell;
    float:right;
    width:70%;
}

and after

.contact-input 
{
    border:1px dashed black;
    display:table-cell;
    float:left;
    width:70%;
}

Answer 2

OK - the main problem you're having is that there's no HTML element grouping your inputs and labels together (in the same way that the table row groups table cells together). If you add a grouping element, that will go a long way to fixing your layout problems.

A nice way to provide this structure in HTML is to use an unordered list (as the form is, semantically, a list of details that the user needs to provide. A grouped structure could go like:

<ul class="formStructure">
    <li>
      <label for="field1">Field 1:</label>
      <input type="text" id="field1" name="field1"/>
    </li>
    <li>
      <label for="field1">Field 1:</label>
      <input type="text" id="field1" name="field1"/>
    </li>
</ul>

This will semantically and visually keep the labels and their fields together. You would need to add CSS to turn off the list style (so you don't see bullets), set widths and margins on the labels, etc.

Also, you can improve your HTML practice when laying out your forms. You're missing the <fieldset> and <legend> elements that are part of good (and valid) HTML forms.