You'll have two options, one easy and another harder.
Easy Way
Try adding this to your styles.css file:
#yardbarker {
position:absolute;
top:-150px;
right:0;
}
The Harder Way
Start by moving the <div id="yardbarker"> from its current location to:
<div class="top-header">
<h1><a href="http://thehazean.com">The Hazean</a></h1>Fantasy football galore.
</div>
So I'd change what you see above to look like this:
<div class="top-header">
<h1><a href="http://thehazean.com">The Hazean</a></h1>
Fantasy football galore.
<div id="yardbarker">
<center>
<p align="center">
<script type="text/javascript">
sr_adspace_id = 3867407;
sr_adspace_width = 728;
sr_adspace_height = 90;
sr_adspace_type = "graphic";
sr_ad_new_window = true;
</script>
<script type="text/javascript" src="http://ad.afy11.net/srad.js?azId=3867407">
</script>
</center>
</div>
</div>
So, that will get it to the right location in the markup, but to fix the layout, you'll need to try something like adding this to your style.css file:
#yardbarker {
position:absolute;
top:40px;
right:0;
}
Is there a right way? Probably not. I'd prefer to have it appear closer to the bottom in the markup since it's not going to benefit search engines.
Really, you could put this code further down the page and use absolute positioning to put it where you'd like it. For now, I'd try one of the above solutions and see if it works for you. :)