Take the 2-minute tour ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.

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.

share|improve this question
add comment

2 Answers

up vote 1 down vote accepted

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.

share|improve this answer
add comment

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.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.