CODEWITHSUNDEEP
htmlcsshtml-tablealignment
NoozNooz42
NoozNooz42

Reputation: 4328

Align one form and two text areas

I've got a FORM which contains a 32*50 TEXTAREA and a Submit button.

Now I'd like to align horizontally two text areas that contains additional information. Ideally the three text areas (the one in which the user can type/paste and the two others) should have the same width and appear in three aligned columns.

If I wanted to do that, should I use only HTML? If so, how? A table with one row and three td? (Sample code would be most welcome).

Or would you rather suggest CSS?

Upvotes: 0

Views: 1802

Answers (3)

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201588

Since textarea is an inline element, you can just put such elements after another. They will then appear in one line if they fit it but wrap to two or three lines if needed.

If you would rather force horizontal scrolling when there is not enough horizontal space, you can use a one-row table. There would be nothing special with the markup:

<table><tr><td><textarea ...></textarea>
           <td><textarea ...></textarea>
           <td><textarea ...></textarea>
</table>

But if you wish to fine-tune the rendering, then that’s best done with CSS.

If the textarea elements need labels, as they usually do, you can place them in another row of the table (at its start).

Upvotes: 2

itea
itea

Reputation: 444

textarea is inline element and they would be horizontally aligned if the container is larger enough in width. So, see http://jsfiddle.net/FATfJ/ I don't know if this is the exact one you need.

code:

<form id="a-form">
  <textarea></textarea>
  <textarea></textarea>
  <textarea></textarea>
</form>

#a-form textarea {width: 100px;}

Upvotes: 3

matpol
matpol

Reputation: 3074

Ideally you need a nice combination on CSS and HTML. You could perhaps use fieldsets to put your fields in and then float them next to each other using CSS. You can set widths and margins etc using CSS and you should be able to line everything up this way.

You could use tables to do this but I find that they can add more code than is really required.

Upvotes: 1

Related Questions