Reputation: 605

Position of Footer is Constant

How can I get my footer to be at the bottom of the container, after everything in main?

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

Upvotes: 0

Answers (6)

Salman Arshad

Reputation: 272106

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".

Upvotes: 1