CSS layout issue

I'm having an issue with getting my css elements to layout correctly, I am having the same issue on Firefox and IE, so I'm pretty sure it's something I'm not doing quite right. Basicly I want a footer element to line up with either of the 2 columns of my 2 colomn content depending on which is longer but its only lineing up with the right most column. Look at these pages for a clearer example...
compare
http://www.scrapbookstudiosinc.com/new/index.php
with
http://www.scrapbookstudiosinc.com/new/employment.php

the stylesheet is here

honestly, the very first thing i think you should do is use a doctype that puts the browser into standards mode.

as soon as i saw that i didnt look any further, but it looks like your floating those boxes on the left. because a floated element is basically taken out of the flow of the webpage, thats why your footer hides behind it.

i wouldnt be able to explain it as good as just showing you how, or showing examples.

so heres one, many more can be found by googling for "css layouts footer"

http://www.fu2k.org/alex/css/layouts/3Col_NN4_FMFM.mhtml

I added the doctype information and started looking around for a soulution. My problem lies in the fact that sometimetimes the content is longer than the left area and sometimes the left area is longer than the content. This seems like it would be a pretty common issue as this is a fairly common layout style. I looked around and found a javascript hack that was supposed to fix this, but it hasn't worked. Does anybody have any ideas? Thanks for your help.

well there is the css property

min-height:


but ie doesnt support it.
BUT

height:

in ie works the same as min-height: does in more compliant browsers

you can use css hacks to feed the correct rules to ie, or better yet, use the ie proprietary 'conditional comments' to feed ie a special stylesheet


so you could wrap everything in a div and give it a min-height to keep the footer down low enough. the div will still expand when it needs to.


and yes, this is a royal pain. ive went through the same things trying to keep a footer on the bottom of the page. sometimes its very difficult to do it totally cross browser.