Position of Footer is Constant

How can I get my footer to be at the bottom of the container, after e开发者_StackOverflow中文版verything in main?

Here's the site: (It's fine on the homepage, but not on any of the others)

You have a few problems in your layout. You must first get rid of fixed heights or increase them as much as possible. Here is the rule that has the problem:

.panels h6 {
  border-left: 1px dotted;
  border-top: 1px solid;
  font-family: verdana;
  font-size: 11px;
  height: 200px;
  /* height 200 px is less than the required height which should be ~244px */
  line-height: 1.3;
  padding: 10px;
}

Next step is optional but recommended to prevent further problems: Inside all elements that contain multiple floated elements, add the following after all floated elements:

<div style="clear: both;"></div>

This will automatically set the height of that element.

Edit ----

Set .panels h6 { height: 200px; overflow-y: scroll; ... }. Then use JavaScript to get and set the height of all three columns equal to the height of tallest column. You can use Prototype functions such as Element.getHeight( ) and Element.setStyle( ) to do this.

Alternately, google "CSS Faux Columns" or "CSS Equal Height Columns".

is this solve your problem ?

.footer { clear:both !important;}

Remove height: 200px from .panels h6. IT should work for you.

What you are looking for is called a sticky footer. Google for it and you will find a bunch of different options. This is what I use link text

Use clearfix on your main div.

i'e used sticky footer to solve this problem before