Footer DIV floating too high. Will give rep for help!

Well, first you should probably clean up your seven validation errors (seven is bupkis, I've seen way worse) - THEN some formatting so we can tell where sections begin/end would go a long ways towards cleaning things up.

THEN, you should probably axe all the nonsensical inlined presentation like <br clear="all"> and swap to semantic markup - the lack of anything even resembling a list or header tag is usually an indication of bad coding.

The real issue though is this:

#footer {
position:relative;
height:116px;
background:url('images/footer-bg.jpg') repeat-x;

margin-top:50px;
top:100px;
z-index:2;

}

#footer-logo {
float:left;
padding-top:36px;
padding-left:41px;
padding-bottom:0px;
color:#ceddef;
font-family:arial;
font-size:12px;
font-weight:normal;
}

#footer-text {
float:left;
padding-top:56px;
padding-left:41px;
padding-bottom:0px;
color:#ceddef;
font-family:arial;
font-size:12px;
font-weight:normal;
}

Code (markup):

I'm not even certain I want to know what that is trying to accomplish, but I DO know all those wierd positioning tricks are going to conflict AND cause problems cross-browser. THEORETICALLY adding "clear:both;" to #footer might clean up your immediate problem, but there's hundreds of underlying issues across the entire layout.

Again, I'd chuck it and start over.

 

You're valid, but definitely still conflicting and still having stuff like
<div><br style="clear" /></div> which is certainly valid, but not a good idea. Like, it's perfectly healthy to eat a banana in its skin, but... ew.

You'll only learn all the optimisation stuff over time. In the meantime, we know that this particular problem has to do with that left links thingie not clearing... floats sit over the rest of the page. Your content in the middle of the page pushes the footer down, but because your content is shorter than your float, the footer pops up underneath.

Because you're floating so many stuff and clearing it here and there with <br>s occasionally, it's difficult to tell you what one thing you should do. I think I only see one thing floated right, the header, so you could try changing the clear:both in the footer to clear: left... but the only surefire way that will work is if the page is better positioned and structured.

For example, for your header you have this:
#header {

height:89px;
width:100%;
margin-left:0;
margin-bottom:0;
padding:0;
top:0;
left:0; ...etc...

Now think. If it's 100% width, you can't position or float is (well you could, but what difference will you see?) and again no point in setting side margins or padding, even to 0, because 100% is 100%. It's everything. Also, by default everything is left and top 0 so let the defaults do the work for you.

You can set whatever isn't a default as far as padding and margin with the universal selector (comes right first thing, before the body even):
* {
margin: 0;
padding: 0;
}

That's almost everything except inside lists and a few other things.

I see some good things you're trying, like having text behind that logo and then moving it out of the way with css... I think you're just overthinking everything.

Look at your page again and maybe print it out on paper or draw it out. Now, make boxes around stuff. You can really simplify this page. Header div at the top with the logo, logo text (which should prolly be your h1 but that's just me), and the navigation in a ul (which is a block element so it doesn't need another div or anything). End header div.
Next, you've got a floating sidebar with linkie thingies and a content page with everything else. So, two columns, write it as so. You've got the left linkie thingie already first in your source, so just have ONE div called "sidebar" or something (if you ever want to move it to the right side or something, don't call it left sidebar but just sidebar or links sidebar or something) and float it left. IF there were any float in your header (there would be even in this simplified version), set the first CSS for the sidebar as clear:whatever-- no br tag or clearing div needed. The sidebar is the next thing in the source so let it do the work for you! Everything else in the sidebar, just stuff it in there-- don't float anything unless the sidebar can't hold it properly in the first place (like sometimes menu anchors or whatever).

After the sidebar you've got the rest of your content and the footer. Give a left margin on the content (one box, with whatever other boxes you want inside but they will stay inside the one big content box) to give room to the sidebar and then comes your footer, which will clear the sidebar with clear:left. That's it!

Try to think of what can do what. You've got a mild case of "divitis" where you're wrapping stuff in divs evne tho you don't necessarily need to. Like, with the logo, you could have the h1 (title of the page), which is already a block element anyway, and stick the image above it. You can try the span trick from http://www.mezzoblue.com/tests/revised-image-replacement/ at the bottom. RIght now you're wrapping an anchor in a div to do the same thing.

Lots of stuff like that can make your HTML shrink by like half. It's less stuff to have to sit CSS on then too -- shortening your CSS.

I'm still learning layouts myself, but now that I've got a handful under my belt, I can look at what I need to make and think, now what's the best, leanest way to make that?

Also keep on eye on those <br /><br /> things... if they're there to make some space, use padding or margin to do that work for you.

Heh, neat trick with the background underlay image thing. I've heard of other people doing that too. That might be why your page is overthought, too-- you didn't make something like a wire diagram of boxes on paper or something. That can help you simplify your page first-- later you add the cool stuff from the image/PSD/whatever.

 

AH! I rewrote your html (not totally done but the general idea, no CSS) and duh-- the footer is high because that sidebar's not floated-- it's positioned absolutely. This removed the sidebar from the page completely and the footer never sees it.

Will post HTML later today (on another machine), but t doesn't fix the footer problem unless the css is changed. Maybe it can be floated, then bumped up over the header with a negative top margin?

 

Ah, I had this on my server:
http://stommepoes.jobva.nl/Mikey/mikey.html <-- no css except a bit I started with so the point of this link is to look at the html, not the page that renders : )

Well, I think MAYBE you can float that sidebar still, while sitting inside the main container (under the nav-menu bar thing) and maybe force it up with a negative top margin. It won't look the same between FF and IE, or at least didn't when I tried that on another page I've done.

OR... if that sidebar NEVER EVER gets any longer and you always need the footer at the bottom of the navbar, you COULD set in the CSS a min-height for the container (which will close right before the footer, so that means the footer is outside the main content box thingie). That min-height will be equal to or a hair bigger than the height of the sidebar. Min-height will mean all browsers (except IE6, we'll get to that) will push the footer at a minimum lower than the sidebar, but if the content on the right ever gets longer than the sidebar, it can push the footer further down.

IE6 is stoopid. It doesn't know what min-height is-- but it does think that "height" means "min-height". You of course don't want to set height in the CSS, because all the other browsers will honor that and won't let growing content on the right push your footer down. So, you hide it from them using the Holly hack (a secret message for IE6 and below only).

#rcol {
min-height: however many pixels it is;
}
* html #rcol {
height: same number of pixels you set above;
}

It will make the css invalid, but is a popular way to make IE6 behave.

Hope this helps. If you want me to, I can try to go further with the CSS but I'm otherwise going to leave it as is. There were a few things I was going to test but it depends anyway on what you really want to do with it.

You could also left the sidebar cover the footer a little bit, like it's covering the top a little bit. That could look cool so long as all the text in the footer stays 250 px from the left : )

I considered wrapping a div around the top menu simply because the actual menu selectors are centered in the page, and while currently I've used padding to push the menu items over, I think I remember that that will also push any background images over too (which, that funky stripy thing would be a background image of the #nav).

 

Currently your sidebar isn't floated. If it was, and if the container of both the floated sidebar and the main text (rcol) had something like overflow:hidden (which can wrap floats) OR simply clear: left in the footer, the footer would definitely stay down. But I meant if you really wanted to keep that sidebar sticking up a bit, you can keep it as it is, position:absolute... just means you need another manner to deal with the footer.

Good luck. It looks like a fun site to play with (css-wise).