Question

I am stuck on figuring out some css, I need a section of my form to look like the following,

I have tried every variation I can think of,

I have given the labels a fixed width and floated them left, then given the inputs the same width and floated them left.

I am all out of ideas, how can I achieve this please?

Answer 1

<form>
  <label for="company">
    <span>Company Name</span>
    <input type="text" id="company" />
  </label>
  <label for="contact">
    <span>Contact Name</span>
    <input type="text" id="contact" />
  </label>
</form>

label { width: 200px; float: left; margin: 0 20px 0 0; }
span { display: block; margin: 0 0 3px; font-size: 1.2em; font-weight: bold; }
input { width: 200px; border: 1px solid #000; padding: 5px; }

Illustrated at http://jsfiddle.net/H3y8j/