How do I align controls vertically?

[tomouse]

I feel bad to post what seems to be such a simple question, but I've been trying this for a while and searching and can't find the answer. I have 4 controls (2 textboxes and 2 dropdowns) which I want sit alongside each other on the page with their upper edges vertically aligned. The textboxes are multi-line (4 rows), the dropdowns are just one line high. I want them to look like this:

---------------      ------   ------    ---------------------
|             |      |    |   |    |   |                    |
|             |      ------   ------   |                    |
|             |                        |                    |
|             |                        |                    |
---------------                        ----------------------

The controls all sit nicely on the same line, but the dropdown boxes have their lower edge aligned with the lower edge of the multi-line textboxes.

I thought a simple div with the style=vertical-align:top would do this, but it is making no difference. Can someone help me? Seems like it must be a very common requirement.

 

[vacunita]

Wrap each input in a div, and float the divs:

div{
float:left;
}

...

<div><textarea cols=10 rows=4></textarea></div>

<div> <select><option>One</option><option>One</option><option>One</option></select></div>


<div> <select><option>One</option><option>One</option><option>One</option></select></div>

<div> <textarea cols=10 rows=4></textarea></div>

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Behind the Web, Tips and Tricks for Web Development.

http://behindtheweb.blogspot.com/

 

[ChrisHirst]

http://www.candsdesign.co.uk/reference/css/vertical-align/

only works on inline elements or with

http://www.modtalk.co.uk/_site/code/css/vertical-align/display-table-cell/

display: table-cell

Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.

 

[Vragabond]

Of course, you don't even have to use divs if you don't want to... Just floating each control and using margins to make sure it's far enough away from the others would suffice.

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[tomouse]

Thanks everyone, got it. T