CSS forms instead of tables 2011

Question

I gave up on using CSS for form styling when I hit snags like requiring 3 textboxes adjacent to one another (like a phone number) or a dropdown list next to a textbox. I just couldn't come up with a reliable way to style it without good ol' TABLES.

I'm thinking about going back to CSS for form styling; I don't know:

1. Whether it's more usable to have captions on top or on the left of the field.
2. How to style the things so they place nicely even with a couple of adjacent form elements.

References? Is this still a pipe dream?

Answer 1

You mean like this?

Basically we create a pseudotable

.mxrow {
clear: both;
width: 100%;
height: 50px;
}


.mxcell {
float: left;
padding-top: 10px;
padding-bottom: 10px;
height: 26px;
}

.mxcell_firstcell{
width: 25%;
}

And the markup would be

<div class = "mxrow">
  <div class = "mxcell mxcell_firstcell"><input element /></div>
  <div class = "mxcell mxcell_secondcell"><another form element/></div>
</div>

The individual cell classnames serve to apply specific css (my markup is a grid)

Answer 2

There are a couple of CSS templates designed specifically for laying out forms.

• vessess.com
• Uni-form

I hope this helps point you in a productive and awesome direction. Take care.