jQuery positioning issue

Question

Good Day,

I have a web form against a white background that allows the user to make certain selections. Depending on the selection that the user makes, this form could grow very long lengthwise. (Although I advised against it, the client was adamant). The form works fine and I'm happy.

However, at the bottom of the form is a div footer that is black and has a height of 50 pixels and the width = 100%. Is it possible to use jQuery to always keep it at the bottom of the form no matter what the user chooses?

Here is the page I am referring to.

TIA,

coson

Answer 1

There is no need to use javascript for this. Just apply following css properties to the footer -

position:absolute;
bottom:0;

Answer 2

Instead of using jQuery, can you just get rid of the div and use border-bottom on the css of the form?

Answer 3

This is a simple CSS problem.

Take a look at your HTML:

                  <!--  V This inline height is your problem -->
<div id="form" style="height:330px">

  <form name="form1" method="post" action="CreditCardInfoMockup.aspx" id="form1">
      ...
  </form>

<div>

...

<div id="footer" ... > ... </div>

Get that inline height assignment out of there!

Your footer is not inside your form. It is outside it. So as the form grows, it overflows the parent div (which cannot change in height). So as the form grows the other divs are not pushed down and out of the way. Instead the form just overflows and covers everything up.

If you let the parent div grow by removing the inline height, then as the form grows, the parent div would grow pushing everything, including the footer down.

Also, the way you use those <br/>s and all the inline CSS is not very elegant. You should read up on CSS.