I am having trouble with the ads that T35's Free Hosting places on their member's pages. They insert the ads via Javascript just before the closing <body> tag. My problem is that they're floating off to the right of my web layout. I tried shrinking my layout and they went down below the footer where they should be. I'm not sure if this is just because of my widescreen monitor (19" Widescreen), or a problem with Firefox, or something else.

Here is the website:

http://darinsrepair.t35.com

And here is the page code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Darin's PC Repair - Home</title>
<meta name="description" content="Darin's PC Repair" />
<meta name="keywords" content="darin beaudreau, pc repair, tech support, north oxford, massachusetts, ma, 01537, computer repair" />
<link href="styles/main_style.css" rel="stylesheet" type="text/css" />
<!--[if lt IE 7]><link href="styles/ie.css" rel="stylesheet" type="text/css" /><![endif]-->
<!--[if IE 7]><link href="styles/ie7.css" rel="stylesheet" type="text/css" /><![endif]-->
</head>
<body>
<?php
$client_IP = $_SERVER['REMOTE_ADDR'];
$visit_date = date("l d F H:i:s");
$fp = fopen("info/ips.txt", "a");
fwrite($fp, "IP: $client_IP\nDate: $visit_date\n\n");
fclose($fp);
$curr_cnt;
$new_cnt;
$fp = fopen("info/counter.txt", "r");
$curr_cnt = fgets($fp);
fclose($fp);
$fp = fopen("info/counter.txt", "w");
$new_cnt = $curr_cnt + 1;
fwrite($fp, $new_cnt);
fclose($fp);
?>
<div id="wrapper">
	<div id="header">
		<p><span>tel:</span> <strong>774.437.9612</strong>
			<ul>
				<li class="no_bg"><a href="#">home</a></li>
				<li><a href="#">FAQ</a></li>
				<li><a href="#">contact</a></li>
			</ul>
	</div> <!--header ends-->
	
	<a href="#" id="logo" title="Darin's PC Repair" class="replace"><span>Darin's PC Repair</span></a>
	
	<form id="search_form" action="search">
		<p><input type="text" value="Search this site for..." />
			<input type="submit" id="submit" value="" /></p>
	</form> <!--form ends-->
	
	<div id="banner">
		<img style="margin-top: 10px;" src="images/darinpcrepair_image.gif" alt="" />
	</div> <!--banner ends-->
	
	<div id="navigation">
		<ul>
			<li class="active"><a href="#">Home</a></li>
			<li><a href="#">About</a></li>
			<li><a href="#">Services</a></li>
			<li><a href="#">Contact</a></li>
		</ul>
	</div> <!--navigation ends-->
	
	<div id="content">
		<div id="left_column">
			<div class="text">
				<h2>Website Under Construction</h2>
					<p>This website is still under construction. If you have any questions, or need to set up an appointment, please e-mail me or call me. My phone number can be found at the top of the page. You can e-mail me at: <a href="mailto: packetpirate@gmail.com" class="email">packetpirate@gmail.com</a><br />
					<br />I hope to have the rest of the website up and running very soon.
					</p>
			</div> <!--text ends-->
			<div class="text alternative">
				<p>&nbsp;</p>
			</div> <!--text ends-->
			<div class="text">
				<p>&nbsp;</p>
			</div> <!--text ends-->
		</div> <!--left column ends-->
		<div id="right_column">
			<div class="heading">
			<h2>Sponsors</h2>
			</div> <!--heading ends-->
				<ul class="sponsors">
					<li><script type="text/javascript"><!--
google_ad_client = "pub-8760377978778321";
/* Darin&#39;s PC Repair Ad */
google_ad_slot = "3664463414";
google_ad_width = 200;
google_ad_height = 200;
//-->
</script>
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script></li>
					<li>&nbsp; <br /><br /><br /><br /><br /><center>Advertise Here</center></li>
				</ul>
		</div> <!--right column ends-->
	</div> <!--content ends-->
</div> <!--wrapper ends-->

<div id="footer">
	<div id="footer_content">
		<ul>
			<li class="no_bg"><a href="#">home</a></li>
			<li><a href="#">FAQ</a></li>
			<li><a href="#">contact</a></li>
			<li><div style="font-size: 15px;color: #fff;">
				<?php
					$visits;
					$fp = fopen("info/counter.txt", "r");
					$visits = fgets($fp);
					fclose($fp);
					echo "Visitors:  " . $visits;
				?></div></li>
			
		</ul>
		<p> &copy; 2010 Darin's PC Repair. All Rights Reserved.</p>
	</div> <!--footer content ends-->
</div> <!--footer ends-->
</body>
</html>

And the CSS:

ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input
{
	margin: 0;
	padding: 0;
}

ul
{
	list-style: none;
}

fieldset
{
	border: 0;
}

body
{
	position: relative;
	background: #383d43 url(../images/top_banner_repeating.png) repeat-x;
	color: #000;
	font: 62.5% Myriad Pro,Arial,sans-serif;
}

#wrapper
{
	width: 943px;
	padding: 0px 0px 0px 1px;
	margin: 0 auto;
}

#header
{
	width: 908px;
	height: 46px;
	font-size: 14px;
	padding: 16px 35px 0px 22px;
}

#header p
{
	float: left;
	color: #525961;
	position: relative;
	top: 15px;
}

#header span
{
	color: #bababa;
}

#header ul
{
	float:right;
	position: relative;
	top: 15px;
}

#header ul li
{
	float: left;
	margin: 0px 12px 0px 0px;
	padding: 0px 0px 0px 12px;
}

#header ul li.no_bg
{
	background: none;
}

#header ul li a
{
	color: #fff;
	text-decoration: none;
}

#header ul li a:hover
{
	color: #525961;
	text-decoration: none;
}

#logo
{
	display: inline-block;
	width: 259px;
	height: 29px;
	float: left;
	clear: both;
	margin: 12px 0px 0px 21px;
	background: url(../images/darinpcrepair_logo.jpg) no-repeat;
	text-indent: -9999px;
}

form
{
	float: right;
}

input
{
	width: 147px;
	height: 12px;
	float: left;
	margin: 13px 0px 0px 0px;
	padding: 5px 10px;
	color: #a0a4a8;
	border: none;
}

input#submit
{
	display: inline;
	width: 60px;
	height: 21px;
	float: left;
	margin: 13px 0px 0px 8px;
	background: url(../images/search_button.gif) no-repeat;
	cursor: pointer;
}

#navigation
{
	width: 948px;
	height: 34px;
	float: left;
	padding: 5px 0px 5px 15px;
	background: url(../images/navigation_repeating.gif) repeat-x;
	border: 1px solid #43474b;
}

#navigation ul li
{
	display: block;
	float: left;
	height: 29px;
	margin-left: 10px;
}

#navigation ul li a
{
	display: inline-block;
	color: #cbd9e7;
	height: 23px;
	font-size: 14px;
	padding: 12px 24px 0px 24px;
	text-transform: uppercase;
	text-decoration: none;
}

#navigation ul li a:hover
{
	text-decoration: none;
	background: url(../images/nav_button_repeating.gif) repeat-x;
	border-left: 1px solid #000;
	border-right: 1px solid #000;
}

#navigation ul li.active a
{
	text-decoration: none;
	background: url(../images/nav_button_repeating.gif) repeat-x;
	border-left: 1px solid #000;
	border-right: 1px solid #000;
}

#content
{
	width: 964px;
	float: left;
	background: url(../images/darinpcrepair_content_repeating.gif) repeat-y;
}

#left_column
{
	width: 635px;
	float: left;
}

#right_column
{
	width: 294px;
	float: left;
	padding: 18px 18px 0px 17px;
}

.text
{
	font-family: Helvetica, Arial;
	width: 626px;
	height: 150px;
	float: left;
	padding: 32px 38px 22px 30px;
}

.text h2
{
	font-size: 24px;
	float: left;
	margin: 0px 0px 12px 0px;
	color: #fff;
}

.text p
{
	color: #bcc4c7;
	width: 552px;
	float: left;
	clear: left;
	font-size: 12px;
}

.text p img
{
	float: right;
	margin: 0px 0px 0px 20px;
}

.text a.continue
{
	position: relative;
	color: #65b8f9;
	float: left;
	clear: left;
	font-size: 15px;
	margin: 30px 0px 0px 0px;
	text-decoration: none;
}

.text a.continue:hover
{
	position: relative;
	color: #FF0000;
	float: left;
	clear: left;
	font-size: 15px;
	margin: 30px 0px 0px 0px;
	text-decoration: none;
}

.text a.email
{
	color: #65b8f9;
	font-size: 15px;
	text-decoration: none;
}

.text a.email:hover
{
	color: #FF0000;
	font-size: 15px;
	text-decoration: none;
}

.alternative
{
	background: #2a2d32;
	border-top: 1px solid #26292e;
	border-bottom: 1px solid #26292e;
}

.heading
{
	width: 220px;
	height: 23px;
	float: right;
	padding: 12px 0px 0px 14px;
	margin: 0px 0px 18px 0px;
	background: url(../images/nav_button_repeating.gif) repeat-x;
	border-left: 1px solid #000;
	border-right: 1px solid #000;
}

.heading h2
{
	font-size: 17px;
	color: #ffffff;
	text-align: center;
	font-weight: normal;
}

.heading img
{
	float: right;
	margin: 3px 0px 0px 0px;
}

ul
{
	float: left;
	margin: 0px 0px 39px 0px;
}

ul.sponsors li
{
	display: block;
	width: 200px;
	height: 200px;
	float: right;
	margin: 0px 17px 10px 10px;
	background: #ffffff no-repeat;
	border: 1px solid #000;
	color: #000000;
}

ul li
{
	font-size: 14px;
	color: #ffffff;
	margin: 0px 0px 17px 11px;
}

ul li span
{
	color: #65b8f9;
}

#footer
{
	width: 100%;
	float: left;
	clear: both;
	height: 120px;
	border-top: 1px solid #3c4249;
	background: #1e2329;
}

#footer_content
{
	margin: auto;
	width: 966px;
	padding: 46px 17px 0px 0px;
}

#footer_content ul
{
	float: right;
	margin: 0px 0px 10px 0px;
}

#footer_content ul li
{
	float: left;
	margin: 0px 0px 0px 12px;
	padding: 0px 0px 0px 12px;
	background: url(../images/navigation_repeating.gif) left bottom no-repeat;
}

#footer_content ul li.no_bg
{
	background: none;
}

#footer_content ul li a
{
	color: #fff;
	text-decoration: none;
}

#footer_content ul li a:hover
{
	color: #525961;
	text-decoration: none;
}

#footer_content p
{
	float: right;
	clear: right;
	margin: 0px;
	font-size: 12px;
	color: #383d43;
}

Problem solved thanks to someone over at DreamInCode.net

I just needed to put a DIV container beneath the footer with a "clear: both;" style.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.