Home/ Questions/Q 6615785
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-25T20:30:18+00:00

I am struggling with how to write the correct CSS for positioning some data

  • 0

I am struggling with how to write the correct CSS for positioning some data entry forms. I’m not sure what the “proper” way to do it is.

An example of what I am trying to create a layout for:

Last Name        Middle Initial            First Name            DOB
|||||||||||||    ||||||                    ||||||||||||||||      ||||||||||

City         State         Zip
||||||||     ||||          |||||||||

Basically I have my labels and the ||| are representing my form elements (text boxes, dropdowns etc). I don’t know the proper way to create classes for these elements without just creating one time use classes that specify a specific width that is only for these elements.

Also, how do I get all of these elements aligned properly and multiple items per line? Do I need to float each element?

Would I do something like:

<div class="last-name">
   <div class="label">
       <label>Last Name</label>
   </div>
   <div class="field">
       <input type="text" />
   </div>
</div>

<div class="middle-initial">
   <div class="label">
       <label>Middle INitial</label>
   </div>
   <div class="field">
       <input type="text" />
   </div>
</div>

...

<div class="clear"></div>

last-name and middle-initial etc would all be classes that would be used once and floated to the left. I’m not sure if this is a good way to go about it or not? Is there a better way to do this kind of positioning with CSS so I can avoid using tables?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    It’s not a bad thing to use table layout when the data you’re laying out is a table! That’s what you have here, imo: a table. So save yourself some grief and treat it that way. We’ve been so beat up by CSS purists and semantic-web lunatics that I suggest the pendulum has swung too far: now we tie ourselves in knots over-CSSifying our layouts. Or at least I do. I spend way too much time trying to avoid table layout.

    The outcome is that a lot of my pages have to do browser checking. And the extra time (hey! the 80-20 rule again!) to deal with browser quirks is way more than it should be. I’d have saved a lot of time, and had more robust pages, if I’d just thought a little bit instead of going for the never-any-tables, always-pure-CSS solution every time. Table handling is solid like a rock in every browser with no problems and no frustrations.

    Just my experience.

    • 0