Adjacent float issue with div and h2 elements both floated left

HTML & CSS
1

In the markup below, when the “adsense336” element is floated left, the h2 element, which is also floated left, is displaying as if it were absolutely positioned to the right and centered vertically with respect to the adsense336 element.

What I’m trying to achieve is to have the h2 element be the first sentence in the content block, but to the right of the adsense336 element as if it were an inline paragraph, so that the paragraph that follows it (also to the right of the adsense336 element), just appears to be part of the same line as the h2 element.

So I’ve basically got a 336 pixel box floated to the left of some content. The content contains an h2 element, followed by a paragraph. I want the h2 element to be displayed inline with the paragraph, but floated to the left of it so that it appears on the same line as the paragraph.

Here is the markup I’m working with (css is below)…

<div class="main">
	<div class="content">
		<h1 class="posttitle">Chai Tea</h1>
		<div class="adsense336"><!--Google 336x250 Ad Script-->
			<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>
		</div>
		<div class="entry">  
			<img src="foo.gif" style="float:right; margin:0 0 10px 10px;" /><h2>Lorum Ipsum Delorum</h2><p>Vivamus faucibus vestibulum massa, a aliquam purus fringilla sit amet. Mauris augue dui, semper at mattis ut, sagittis eu orci. Duis non ipsum eros, molestie faucibus mi. Maecenas consectetur, enim at consequat adipiscing, augue lectus feugiat ipsum, vel ultrices est tortor vitae ante. Donec at porta felis. Vivamus nulla ligula, sollicitudin eget luctus et, gravida sed metus. Proin lacinia, massa in pulvinar tempus, tortor libero vestibulum urna, non congue eros neque non ante. Nam imperdiet, nisi a venenatis tristique, mi diam mollis augue, quis rutrum felis libero at lorem.</p>
		</div>
	</div>
</div>

And here is the css…

.adsense336 {
float: left;
margin:0 10px 12px -7px;
}

.entry h1,.entry h2,.entry h3,.entry h4,.entry h5,.entry h6 {
font-size:100%;
float:left;
margin:0;
padding:0 .5em 0 0;
display:inline;
}

.content {float:left;width:700px; padding:0; font-size:90%;min-height:300px; margin:27px 0 0 20px; background:url(sidebar.gif) 0 16px no-repeat;}

.entry {padding-right:10px; line-height:1.75em;min-height:300px;}

I’ve attached a snapshot below of what it looks like as is. Its only when I remove the Ad from the markup, that everything aligns as expected.

2

.entry and the paragraph should be floated too. A width for .adsense336 shouldn’t hurt either.