Page Breaks after random content

Hey everyone. I'm having a odd problem with setting up the CSS for printing a page. Right now, I have a weird page break that gets auto inserted after my first div container in my overall container, instead of keeping it all contained to one page. I'm not sure how to stop it from happening and can't figure out why its happening. The weird thing is that if you use the "media print" emulator in FireFox it doesn't show the page break! So i'm confused! Lol. This seems to be a problem in FireFox only.

Thanks! Link is in the comments!

This is the CSS i'm using:

@media print {

	.side-header,
	.sidebar,
	.main-navigation,
	.widget-area,
	.footer-widgets{
		display: none !important;
	}
	 
	body {
		background: #fff !important;
		color: #000;
		font-size: 10pt;
		margin: 0;
	}

	.content-area {
    width: 100%;
	}
	
	.introText{
		margin-bottom: 0px !important;
	}
	
	.pleaseNote{
		margin-bottom: 0px !important;
	}
	
	.weatherReporting{
		margin: 0;
	}
	
	.weatherReporting h1{
		font-size: 20px;
	}
	
	.caveRatingChart h2{
		font-size: 20px;
	}
	
	hr{
		display: none
	}
	
	.caveRatingChart .caveRating{
		margin-top: 0px;
		font-size: 15px;
	}
	
	.weatherReportingGrid{
		margin: 0px;
	}
}