Lining things up while using columns

Question

I have a request that may not be possible.

I'd like to line up the elements of a form so that the inputs all start at the same place:

Name:                            [                           ]
Company:                         [                           ]
Some question with a long name: [                           ]

But my list is (somewhat) long and I would like to show them in multiple columns on screens that are wide enough.

Ideally, I'd find a POSH method (table-free is semantically appropriate, I think) that works on a reasonable number of browsers.

My current page uses a table. I tried CSS with

columns: auto; 
-moz-column-count: auto; 
-moz-column-width: auto; 
-webkit-column-count: auto; 
-webkit-column-width: auto;

but Firefox (at least) won't break a table across columns.

Answer 1

Using the CSS display: inline-block would be the best way to do it. Depending on your browser compatibility needs, you may need to use some workarounds since it is only supported in modern browsers consistently.

A List Apart has a good article about how to use the inline-block setting: Prettier Accessible Forms.

Then, to get some parts to wrap or not, just use the usual word breaking/non-breaking   or width: ... specifications.

Answer 2

I would use JavaScript and the JQuery library with regular HTML tables to:

-First, calculate the width in pixels of the column (This gives you the freedom to update the list without having to worry about updating and measuring pixels every time) Ex, widthOfQuestion + widthOfInput. -Second, find the resolution that is being used (Or the browser width - preferable). -Third, see if double the width of the column could fit on their resolution. If so, then write in '\n '.

To specifically know how to do this, consult StackOverflow.