: Lining things up while using columns 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:

@Shakeerah822

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.

Vote Up Vote Down

@Kaufman445

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.

Vote Up Vote Down