H2 tag completely ruins styling when included in code?

Ok, so I wanted my category template to look the same as my index template so I more or less copied the code from index.php to category.php. I added a header to the top of my catefory template thast does not appear on my index page so that I could add the category name.

The problem is that at the top of my category.php file there is the following snippet of code

<div id="top">
<?php if (is_category()) : ?>
		<h2 class="pagetitle"><?php single_cat_title(); ?></h2>
		<?php elseif (isset($_GET['paged']) && !empty($_GET['paged'])) : ?>
		<h2 class="pagetitle">Blog Archives</h2>
		<?php endif; ?>
</div>

That’s how the code should be written, but it ruins the styling and ends up looking like this:

Picture

Note that the grey bar that says “GameStop Coupons” looks correct, but it pushes the post to the bar at the side leaving a white space.

If I take the php out of div id=top so that it looks like this:

<div id="top"></div>

<?php if (is_category()) : ?>
		<h2 class="pagetitle"><?php single_cat_title(); ?></h2>
		<?php elseif (isset($_GET['paged']) && !empty($_GET['paged'])) : ?>
		<h2 class="pagetitle">Blog Archives</h2>
		<?php endif; ?>

Then the styling looks lke this. but the text obviously isn’t displayed in the grey header bar.

Picture

Does anyone have any idea why a small bit of text messes up the styling completely?

Pastebin of layout.css (div.listpost controls the styling for the blogroll on the category page.)

Any help would be greatly appreciated!