Help with "sticky footer"

Ok, I apologize for the perhaps really fundamental question. I looked over stickyfooter stuff etc already, but I am really new to the actual coding here so i'm confused on how to implement it. I have a page set up, but I need to get the footer to stick to the bottom of the browser. As it stands I have a page or two in my website where the footer floats up because on larger monitors there isn't enough to keep it down.

I realize I could just add some space to force the footer down up to a certain size of monitor, but i'd prefer not to obviously, since that's quite clumsy. One would think i could just add a <div> between my last paragraph and footer that's 100% height so that it adjusts appropriately... or i would have hoped, but that's not how it works i guess. haha.

Anyway. Below is a link to a page with the code for my page.

I am at a loss on how to implement the correct code to make the footer stick. Can SOMEONE please help me and tell me what i need to do and where?

And PLEASE don't flame if you are going to tell me that people pay you for a reason, I am a designer myself and I understand no spec and all that, but I really could use some advice and i think this is a really easy fix/implementation for someone who knows.

Code located here: http://www.detailedeventsmanagement.com/code.html

and no, it's not for that website, i just uploaded it to another website that I was just finishing temporarily.

Thanks so much in advance!

<div class="thrColHyb2"> is the section (footer section) that I need to stick. The css is at the head of the document.

 

I'm still trying to figure this out. Can anyone help me?

 

@ webmunki - thanks for the link, however i'm not looking for the footer to always be visible like the solutions you gave me, I am looking for it to be visible when you scroll down and then stay at the bottom of the page (ie: scrolling stops when it gets to the footer) ... as it stands now, it floats up with space below it when i get to the bottom of the page. I want that space gone, however thanks for that link as I might need that solution at another time.

@ epony - I tried that but it doesn't seem to change anything! I wish it were that simple!

@ all - there is a "live" version of the site at www.detailedeventsmanagement.com/justabite/contact this page is easier to see since it's a shorter page.

it's the home page, and the images aren't active pngs (the links don't work, i just put in the png images instead of the fireworks html for the time being to lay it out) ... note how the footer floats up if the window is big enough? it's much easier to see if your monitor is larger. I want the footer to always be the furthest to the bottom, with no extra space below it. (in this version the footer is that whole bottom chunk, however in the new version that isn't up yet the footer is just the purple bar at the bottom - but the idea should be the same whatever the image) - i'll put the newest version up when I get home today.

 

I don't understand what you mean by my footer is a row in the table. It isn't. I only have tables in front of my background for the sets of text. My footer is still a separate DIV with a table on top for the text?

I revised the layout though and separated some things, so here's the new one.

But yes, I don't want just a fixed footer that I can always see, like I said I want to see at the end and always be the lowest point.

http://www.detailedeventsmanagement.com/justabite/contact.html

- What is a better way to put the text on top of a background image without tables? I asked this question in another thread that someone had started... but I am definitely curious. I'm using Dreamweaver. I'm much more visual than I am a coder by far.

 

@angelwatt

but how would I lay this out, say, visually in dreamweaver, instead of inserting a table, I instert... ? what to lay this out? As far as making sure the text stays in paragraphs in certain areas etc? Like I want 3 boxes for instance across the image with text?

And could you show me a place that may have this implemented with javascript so I could give it a look?

 

thanks webmunki.

I tried to use divs but I was lost on how to get them to move with the background images correctly (ie, when the window was resized they would stay where i put them instead of moving with the divs/backgrounds behind them.

I feel like there should be an easier way to get them to "stick" to position.

I know this is a silly question but what does "float left" or right mean? what about sites with centered layouts?

boy do I wish there were better tools to do this sorta stuff all visually now, it seems like, with all the tech there is today, they would have had better solutions for this by now. I suppose one can learn coding and then dream of a day when they finally get a program that can create usable code.

 

I knew that. I'm sorry, I meant, what does it actually do to what you float?