FireFox Bottom DIV Alignment
 

I'm having trouble getting a DIV to align to the bottom of the browser window in FireFox. It's a container that holds all the forum content. It starts wrapping at the top of the header template and closes off in the footer template just before the bit of Javascript that comes at the end. It's perfectly flush in the top margin, but nothing makes it flush at the bottom of the forum in FireFox. Works fine in IE.

I've tried everything from setting a negative margin for the bottom of the container to setting a 100% height to the body and to the container. Setting the html to 100% only seemed to make things worse. I've tried an absolute position, cleared floats on both sides. I'm at a loss as to what to do.


This is the last thing I've tried as of posting this, with the body set to 100% height.

What your doing is actually a pretty difficult task to accomplish in all browsers.

You'll need a specific rule for ie.
In ie you set the height of the container to 100%.
In other browsers you set min-height to 100%.

I forgot all about min-height.

Well, it appears my problem was related to neither the DIV nor the browser necessarily. I had some nested DIVs at the bottom of the container using floats inside of a master DIV. For some strange reason, I had set the margin bottom of one of the floating DIVs rather then the bottom margin of the master DIV to give me the spacing I wanted. Moved the margin to the correct DIV, the master for the floating ones, and the spacing problem went away. Perhaps I should try sleeping every now and again. I hear it works for some people.