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;
}