100% Height problem only in Firefox

**monkey64** · 06:37 AM

Hello

Well I'm a newbie to CSS and I have an issue with using 100% height when viewed in Firefox.

IE renders the page as I wish, and the blue background holds all the yellow blocks. Firefox does something weird and the yellow boxes overlap the blue background. If I use a pixel measurement, everything works well. That's great, but I don't want to keep changing the px height of the page each time I add new content.

I uploaded it to my site: http://www.realbabyguide.co.uk/test.html

Any ideas? I'm tearing my hair out (what's left of it!).

Maybe I should have stuck with tables...

**Webmonkey** · 09-24-2006, 12:42 PM

Very weird, Whats your CSS?

**monkey64** · 09-24-2006, 02:49 PM

CSS:

<style>
body
{
text-align: center;
}
.container
{
text-align: left;
height:100%;
width:750px;
padding-bottom:80px;
margin: 0px auto 0px auto; /* top, right, bottom, left */
background-color:#C2C2F0;
border:#000000 1px dotted;
}

.block
{
height:80px;
width:150px;
margin:40px;
background-color:#FFFF33;
float:left;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}
</style>

**zincoxide** · 09-24-2006, 02:50 PM

you need to add a footer to the page which goes across the width of the container. Then add "clear:both;" to the css for the footer and that will bring it down to the size of the page. Get rid of height 100% as it can cause problems in IE.

Here is the HTML so you can see what I mean:

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>

<style>

body 
{
  	text-align: center; 
}

#container 
{
	text-align: left;
	width:750px;
	padding-bottom:80px;
	margin: 0px auto 0px auto; /* top, right, bottom, left */
	background-color:#C2C2F0;
	border:#000000 1px dotted;
}

#footer {
	width:750px;
	border:0px;
	margin:0;
	padding:0;
	clear:both;
}
	
.block
{
	height:80px;
	width:150px;
	margin:40px;
	background-color:#FFFF33;
	float:left;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
}

</style>

<body>

<div id="container">

	<div class="block">Here is a test floated block</div>

	<div class="block">Here is a test floated block</div>
	<div class="block">Here is a test floated block</div>
	
	<div class="block">Here is a test floated block</div>
	<div class="block">Here is a test floated block</div>
	<div class="block">Here is a test floated block</div>

	<div id="footer"></div>
</div><!--Close COntainer DIV -->

</body>
</html>

**LadynRed** · 09-25-2006, 12:34 AM

Firefox isn't doing anything weird, FF is complying with the standards. In that manner, IE is the one that is getting it WRONG - as always.

You don't need a footer, but you MUST clear your floats and there are several methods for doing that:
http://css-discuss.incutio.com/?page=ClearingSpace

**zincoxide** · 09-25-2006, 12:46 PM

I'm not a pro but I just figured a footer going across the bottom would be the easiest way to clear the floats. Most people put some kind of Copyright notice at the bottom anyways, so I figure it's perfect.

LadyNRed - Just out of curiousity, without adding some kind of spacer/footer along the bottom, how would you clear your floats??

**LadynRed** · 09-25-2006, 04:04 PM

I do it this way:
.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 put a <br class="brclear" /> in the HTML following the container holding the floated elements.

100% Height pages - free article:
http://www.communitymx.com/abstract.cfm?cid=BAD95

**zincoxide** · 09-25-2006, 04:54 PM

Cool... Good to know.

Now, my solution, I did test and it worked fine... The output seemed to be the same as Monkey64 wanted.

Was it correct, incorrect or just a different way of doing it?

**LadynRed** · 09-25-2006, 09:48 PM

There are often several ways to solve the same problem