How to align inputs to bottom?

Question

I am working on a PHP-HTML-JavaScript combination web software similar to Googlefight (only mine won't use Flash, and will search Google, Yahoo, Excite, Ask.com, and many other engines).

When I use the JavaScript to change the HEIGHT attribute of the style of two text input elements on the page (to make one larger than the other based on the result numbers), the inputs automatically align to the top, so that the taller one seems to "hang down" instead of "point up", if you know what I mean.

Is there any way to make the inputs align to the bottom of, say, a DIV, so the taller one is HIGHER than the other, and not LOWER (as it is now)?

-IMP ;) :)

@Lookforadam: That didn't work. I'm using NetScape. I tried it first as a containing DIV's style, which didn't work, then as a containing SPAN's style... which also didn't work?

I used it on the container AND on the inputs. Neither way works.

Answer 1

Welcome to the nightmare that is trying to align and resize form elements in relation to each other!

Basically, you need to put your inputs in a span which have the following CSS:

{
vertical-align: baseline
}

That command aligns the element to the bottom of it's parent element (ie, your div)

It's a lot of code you will end up with but you will at least be able to do it. Unfortunatley, I don't think IE interprets the CSS correctly, I've never found a satisfactory cross browser solution because of this but good luck.

// MORE INFO

Sorry for not being clear, you have to apply the baseline attribute to the inputs, not the container!