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) http://dl.dropbox.com/u/122695/ds/index.html
unfortunately it doesn't
mdogg
2010-04-26 01:07:46
this should work, but you have to move the footer outside the #container you slider contains absolute position divs..footer { width: 960px;text-align:center;margin: 3em auto;}
Puaka
2010-04-26 01:52:58
when I do that it puts the footer in the middle of the page for whatever reason
mdogg
2010-04-26 03:06:10
ok.. try this, put <br clear="all" /> just before footer div.
Puaka
2010-04-26 08:58:54
dont forget the css above
Puaka
2010-04-26 08:59:25
Yes, there's an h6 overflowing and clear: both will not solve it.I unchecked the height: 200px from my DOM inspector and it worked exactly they way you want it.
Elie
2010-04-26 09:11:40
yea you're right, that problem was in bodytext as well. It was the fixed height. Thanks. How can I get the border to be a set height?
mdogg
2010-04-27 00:59:35
A:
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
patricksweeney
2010-04-26 00:19:23
I don't want the footer at the bottom of the page always, I just want it at the bottom of the content
mdogg
2010-04-26 01:41:55
A:
On your home page your "footer" div is outside your "main" div. On the internal pages (I checked "about") it's inside that "main" div. Fix that and see if the problem goes away?
pjmorse
2010-04-26 00:21:20
A:
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".
Salman A
2010-04-26 07:19:12
yea that's the problem. I set the height to be 200px so that the left border would be uniform. Is there any way I can set the border to be a certain height?
mdogg
2010-04-27 01:00:10