CSS Block for Employee Entry Form

Question

Hello I am creating a simple form to enter employee information. An employee has the following characteristics:

• First Name
• Last Name
• Age
• SSN
• Gender
• Race
• etc...

There are about 20 properties I want to display a label and textbox for (some have dropdowns). I don't want to use a table because I've read that using <div> elements and CSS is better style so I want to take this opportunity to learn. Some of the fields are really wide (Address1, Address2) and others are very narrow (Mr./Mrs.).

Right now all label/input pairs are set up like this:

<div class="data-container">

  <div class="data-row">
    <div class="data-label>
      <!-- label -->
    </div>
    <div class="data-input>
      <!-- textbox -->
    </div>
  </div>

  <!-- many more label/input pairs here -->

  <!-- Submit --> <!-- Cancel -->


</div>

I want each 'data-row' to be on a separate horizontal variable-width row At the bottom there is a Submit and a Cancel button, I want those centered and on the same row.

I tried setting this CSS

.data-row
{
  display: block;
  clear: both;
}

.data-label,
.data-input
{
  float: left;
}

But even with block display on the rows they continue to wrap around the entire container so I can't get 3 inputs on one row, then 4 on the next, and then 3 more, and so on. How can I do this properly?

Answer 1

try adding overflow: hidden;

.data-row
{
  display: block;
  clear: both;
  overflow: hidden;
}

Answer 2

I'd recommend, for simplicity, using a ul nested within the form element, and using simple html form elements:

<form action="" method="post">
<ul>
  <li><label for="firstName">First Name:</label><input type="text" name="firstName" id="firstName" /></li>
  <li><label for="familyName">Family Name:</label><input type="text" name="familyName" id="familyName" /></li>
  <li><label for="age">Age:</label><input type="number" name="age" id="age" /></li>
  <li><label for="ssn">SSN:</label><input type="text" name="ssn" id="ssn" /></li>
  <li><label for="gender">First Name:</label><input type="radio" name="gender" value="male" />Male<input type="radio" name="gender" value="female" />Female</li>
  <li><label for="streetAddress"><input type="text" id="streetAddress" name="streetAddress" /></li>

</ul>
</form>

Couple the above with the following css:

form ul {
list-style-type: none;
}

and you get the data-row on separate horizontal variable width rows for free. I realise that it's a different html structure, but it does seem to come with benefits, including multiple input elements on one line (so long as you don't display: block them in your css).

Answer 3

Not sure I understand the problem fully, but I think u want to be able to display multuple divs floated left within a container div. Two things you need to do in your code to get this to work: 1 - you're missing a couple of double quotes in your markup for the class names 'data-label' and 'data-input'. and 2 - add a 'display:inline' to the floated css declaration. That should do the trick.

Here's a link: http://jsfiddle.net/KMH6f/