Long copy breaks page in FF

[bmaniero]

Can somebody explain why the longest pages break in Firefox?

http://www.bmwebdes.com/test/acfilte...ing_filter.htm
http://www.bmwebdes.com/test/acfilte...nd_service.htm
http://www.bmwebdes.com/test/acfilte...nditioning.htm

http://www.bmwebdes.com/test/acfilter/global.css

The main content is within the following divs: #content and #content #main.

They all look good in IE. The other pages look fine in FF as well, but it seems like as soon as the copy reaches as certain vertical lenght the page breaks.

I want the page to stretch at a 100% height.

I am not sure what I am doing wrong and what the solution is. Any suggestion is very much appreciated. Thank you

Happy 4th to all!
Barbara

[ada80ro]

You'll have to use the clearfix hack on the #content div.
More details here:
http://www.positioniseverything.net/easyclearing.html

[bmaniero]

Thank you, but this is not working for me. I tried to implement it tryong different placements in the HTML, but no luck.

So, I don't know ifI am doing it wrong or if ut just wasn't the fix for my problem.

Any other suggestion? Thanks.

[Nadia P]

I added clear: both to the ul#footer and that moved the footer links down.

I would first fix the validation errors in your html and then try and validate the css (can't do that now because the xhtml doesn't validate) and see where the page stands at that point.

Nadia

[ada80ro]

Hi, I've tested with the clearifix hack and it works if you remove height:100% from #container.
1. Add this class to global.css:

/*start clear hack*/
.clearfix:after {
    content: ".";
   display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
/*hide from ie-mac\*/
* html .clearfix {height: 1%;}
/*hide from ie-mac*/

2. remove height:100% from #container
3. and then:
<div id="content" class="clearfix"> in the html page