The Web Design class I'm in is working on the school's website. We just got a new layout for it and we're setting everything up. For some reason, with this new layout, it is just letting the content in it overflow vertically. None of us know what the problem could be, and it works fine in IE, but it's FF that it is messing up in. Could someone help me out here?

If you could show us the code or the actual page it would help a lot.

First hint - IE GETS IT WRONG !! IE has so many bugs it's not funny:
Explorer Exposed!

Chances are pretty good that Firefox is doing it CORRECTLY, it usually does compared to IE.

Are you using CSS for layout, or tables ??? Hopefully you are suing CSS

Yeah, I'm using CSS. Here's the CSS code:

html,body {
	height:100%;
	}

body {
	font-family: Arial, Verdana, sans-serif;
	padding:0px;
	margin:0px;
	background-color:#474747;
	font-size:0.8em;
	height:100%;
}

.container {
	margin-top:25px;
	height:80%;
	}

.logo {
	position:absolute;
	top:4px;
	left:10px;
	font-size:3em;
	font-weight:bold;
	font-style:italic;
	color:#e88686;
	}

.tagline {
	margin-top:2px;
	margin-left:20px;
	color:#fff;
	font-weight:bold;
	}

.tabs {
	margin-top:0px;
	width:100%;
	background:#474747;
	height:1.8em;
}

.top {
	margin-top:0px;
	width:100%;
	background:#d60202;
	height:20px;
	background-repeat:repeat-x;
	border-bottom:1px solid #d60202;

}

.content {
	width:100%;
	height:100%;
	background:#eee;
	text-align:justify;
}

.footer {
	width:100%;
	padding-top:5px;
	padding-bottom:5px;
	background-image:url(bg.gif);;
	text-align:center;
	border-top:2px solid #ccc;
	border-bottom:3px solid #000;
}

.left {
	float:left;
	width:65%;

}

.right {
	float:right;
	width:32%;
	margin-top:20px;
	background:#eee;
	border-left:1px solid #ccc;
}

.calnum {

	border: 1px solid #cccccc;
	width: 30px;
	height: 25px;
	text-align: center;
	font-size: 20px;
	color: #474747

}

.calheader {

	text-align: left;
	font-size: 20px;
	color: #474747

}

.righttop {
	width:100%;
	background-image:url(bg.gif);
	border-top:1px solid #ccc;
	border-bottom:1px solid #ccc;
}

.rightbottom {
	width:100%;
	background:#df8282;
	background-image:url(bg.gif);
	border-top:1px solid #ccc;
	border-bottom:1px solid #ccc;
	height:15px;
}

ul	{
	float:left;
	width: 630px;
	padding-left:150px;
	margin:0;
	list-style-type:none;
}

 a.tab	{
	float:right;
	height:1em;
	text-decoration:none;
	color:#fff;
	background-color:#df8282;
	padding:0.4em;
	text-align:center;
	border-right:1px solid #474747;
}

a.active	{
	float:right;
	width:6em;
	height:1em;
	text-decoration:none;
	color:#fff;
	background-color:#d60202;
	padding:0.4em;
	text-align:center;
	border-right:1px solid #474747;
	
}

a.active:hover {
	background-color:#d60202;
	color:#fff;
	text-decoration:none;
}

a.tab:hover {
	background-color:#d60202;
	color:#fff;
	text-decoration:none;
}

li {
	display:inline;
}


a.first	{
	float:right;
	width:6em;
	height:1em;
	text-decoration:none;
	color:#fff;
	background-color:#df8282;
	padding:0.4em;
	text-align:center;
	border-right:1px solid #474747;
	background-image:url(corner2.gif);
	background-position:top left;
	background-repeat:no-repeat;
}

a.first:hover {
	background-color:#d60202;
	background-image:url(corner.gif);
	color:#fff;
	text-decoration:none;
}

a.firstactive	{
	float:right;
	width:6em;
	height:1em;
	text-decoration:none;
	color:#fff;
	background-color:#d60202;
	padding:0.4em;
	text-align:center;
	border-right:1px solid #474747;
	background-image:url(corner.gif);
	background-position:top left;
	background-repeat:no-repeat;
}

a.firstactive:hover {
	background-color:#d60202;
	background-image:url(corner.gif);
	color:#fff;
	text-decoration:none;
}


.content p {
	padding:10px;
	}

.right p {
	padding:10px;
	}

h1 {
	font-size:1.4em;
	color:red;
	margin-left:10px;
	margin-top:10px;
	border-bottom:1px solid #ccc;
	font-style:italic;
	font-weight:normal;
	}

.righttext {
	padding:5px;
	color:red;
	font-size:1.3em;
	font-weight:bold;
	font-style:italic;
}


.pic {
	float:left;
	padding:5px;
	margin-right:8px;
	margin-top:8px;
	margin-bottom:8px;
	border:1px solid #ccc;
	}


a {
	color:red;
	text-decoration:none;
}

a:hover {
	color:red;
	text-decoration:underline;
}


a.blocklink {
	display:block;
	width:70%;
	padding:1em;
	border:1px solid #ccc;
	border-right:7px solid #df8282;
	margin-top:5px;

}

a.blocklink:hover {
	display:block;
	width:70%;
	padding:1em;
	border:1px solid #fff;
	background:#ccc;
	border-right:7px solid red;
}

a.last	{
	float:right;
	width:6em;
	height:1em;
	text-decoration:none;
	color:#fff;
	background-color:#df8282;
	padding:0.4em;
	text-align:center;
	border-right:1px solid #474747;
	background-image:url(corner3.gif);
	background-position:top right;
	background-repeat:no-repeat;
}

a.last:hover {
	background-color:#d60202;
	background-image:url(corner4.gif);
	color:#fff;
	text-decoration:none;
}

a.lastactive	{
	float:right;
	width:6em;
	height:1em;
	text-decoration:none;
	color:#fff;
	background-color:#d60202;
	padding:0.4em;
	text-align:center;
	border-right:1px solid #474747;
	background-image:url(corner4.gif);
	background-position:top right;
	background-repeat:no-repeat;
}


a.lastactive:hover {
	background-color:#d60202;
	background-image:url(corner4.gif);
	color:#fff;
	text-decoration:none;
}

form {
	padding:10px;
}

input {
	margin:5px;
	border:1px solid #ccc;
	color:red;
	cursor:pointer;
	padding:3px;
}

And I suppose you could view the source on the page for the page's coding.

Oh, I forgot to link to it, haha. Here: Bloomingdale High School - Home of the Rajun' Bulls

Ok, I know what the problem is, as I suspected. You need to clear your floats.
Here's some info:
Clearing Space - css-discuss

There are a couple of methods for clearing a float, I use this one:

.brclear { /* Use a break with this class to clear float containers on both sides */ clear:both;
height:0;
margin:0;
font-size: 1px;
line-height: 0;
}


Then you put a <br class="brclear" /> in your HTML following the container that follows the floats.

Nice design by the way.. I like RED

Well first of all I just want to say the design looks pretty good and from what I've seen you've done a pretty good job with it.

I think the issue is with all the 100% heghts on the htm, the body and many of the divs. Typically I wouldn't specify a height unless I wanted it to be some fixed amount. When you want to allow it to expand it's usually best just to let it be. Most of the time the elements will expand to the size they need to be, which may be different for each page.

On your page I notice that .container is set to have a height of 80% and that's why the paragraph seems to be overflowing things. The reason it works in IE is because IE ends up treating height as min-height. Firefox though which is handling things right in this case is maintaing that 80% height on .container, which subsequently affects .content.

When I set .container to be height:100% it no longer appeared to be oveflowing things. The footer moved down below the paragraph and the text inside the footer centered itself. I'm not sure if that's what you wanted though.

If changing the height of .container works great. If not just add a few more specifics about how things should look and myself and LadynRed and probably a few others will be back to try again.

You beat me to it LadynRed. I was thinking of clearing the floats too, but didn't get the results I wanted with some limited changes so went after that height thing instead.

JGianotti I guess you now have a couple things to try.

Well, I rarely use the height:100%, I'm not obsessed with having the height of everything fill the viewport, so I agree with you on the height thing

Well at first I thought it was a problem with the heights, but after taking different ones out and seeing where the problem could be, nothing was fixed, so I put them all back in where they were. I'll try the code to clear the float and let you know how that works out.