footer messing up

[Ninjakreborn]

www.thecampussource.com
for some reason the footer, the part with rentals, is overlapping hte footer slightly for some reason, any ideas on how to fix it.

[ToonMariner]

Yep

add

clear: both;

to the css declarations of the footer id

[Ninjakreborn]

I did, actually it's already there, I didn't show the css file because it can be pulled through the browser, I was wondering if anyone saw what could be causing this, it isn't because of the layout, it's because the thing ended up going down further than I thought, the area with the advertising.

[obsidian]

try this: put a wrapper div around your 3 columns (but [b]before[/b] your footer), and apply the following .clearfix class to it:
[code]
.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
[/code]

clear: both is often [i]not[/i] the best way to clear floats. believe it or not, IE is one of the only browsers to interpret clears properly. by definition, a clear is to clear [b]all[/b] floats that come before it in the markup. take a look at your page in IE: the footer works fine... try out that solution and see if it helps.

[Ninjakreborn]

I tried it, I put the div around everything but the footer, adn put that in the stylesheet, and had a class="clearfix" to the div, adn it didn't fix it.  I took it back off now, but I tried it, and it didn't work, any more advice, I don't understand this myself, wildteen is the one who helped me put this together, and it originally worked great, but when I started putting in content it went lower than I expected, plus me adding styles to it, I don't know if that's what caused it, but now it only messes up in firefox, they are even telling me it still looks great in higher resolutions.

[obsidian]

are you doing anything funny with negative margins or absolute positioning? i glanced at your CSS and didn't see anything, but i didn't look in depth.

[wildteen88]

I have found the problem. It is to do with this:
[code]#content
{
width: 420px;
height:400px;
float:left;
margin: 0 20px;
}[/code]
I notice [i]height:400px;[/i]

That sets the content div to a fixed height of 400px. The content will flow out side of the div if the content get greater than 400px, as the content will not resize. This results in the footer not moving and the content flows over the div. What you should do is either remove [i]height:400px;[/i] or use [i]min-height:400px;[/i]. if you use the latter you may need to use CSS hacks as IE6 and lower doesnt support min-height. It'll also affect other browsers too.

[obsidian]

if you use the clearfix class on the containing div i showed above, you don't have to worry about height at all since it will force the containing div below your longest column. just remove the height attribute completely, and you should be fine.

[Ninjakreborn]

At this point, simply removing the height restriction seemed to have totally fixed the problem in all those browsers, thank you all for the help, as for the clearfix, I know what it's for now, I will look into it,maybe it can help me in other situations, thank you all for the help.