Search code examples
htmlcsszend-formalignment

How do I align a button to be inline with the bottom of an adjacent text area?

I'm working within zend forms. Currently this is how it looks:

enter image description here

I want to align the 'Suggest Subtest' button so that it is inline with the bottom of the Subtest text area, like below;

enter image description here

I've created a jsfiddle with the code that I used; http://jsfiddle.net/g6SV5/

Appreciate any help.

Solution

  • Give each "row" a class of formRow with the following CSS:

    .formRow {
    width: 100%;
    position: relative;
}

    Then style your submit button to be positioned absolutely at the bottom right of each row.

    submit {
   position: absolute;
   bottom: 0;
   right: 0;
}

    Live Example here -> http://jsfiddle.net/spacebeers/vNuZx/1/