Need help with blog CSS vs HTML

I have started a new blog and am experimenting with the posts' layout. I just tried using an align="left" image tag to put my text next to an image. That resulted in the next post partially being next to the image as well. So I put a br clear="all" tag after it, and now there's a huge white space underneath the post.

http://www.upontherainbow.com/consumerthoughts/

Can anyone tell me what's causing that huge white space?

Here is the exact code from the post:

<img src="http://www.upontherainbow.com/images/strawberrycream.jpg" align="left" />

I haven't seen the other new flavors (Black Cherry French Vanilla and LimeBerry), but today I tried out the new Pepsi Jazz Strawberries &amp; Cream.&nbsp; It's very good for a diet pop - I couldn't even tell it was diet!&nbsp; It has the same note of bubblegum in the background that Pepsi Blue had... I don't know if that's a result of the sweetener they use, or a side effect of the flavorings.&nbsp; I would definitely buy it again!

Picture courtesy of <a href="http://www.bevnet.com/reviews/Pepsi%5FJazz/">BevNet</a>.

Technorati Tags: <a href="http://technorati.com/tag/pepsi" rel="tag">pepsi</a>, <a href="http://technorati.com/tag/jazz" rel="tag">jazz</a>, <a href="http://technorati.com/tag/taste%20test" rel="tag">taste test</a>, <a href="http://technorati.com/tag/" rel="tag"></a>
<br clear="all" />

Code (markup):

 

Try "clear: both;" instead of all

 

Well, that gives me the original problem again... the 2nd post wraps next to the image from the first. I left it so you can see what I mean.

 

Will you please give us a link to the page?

cheers,

gary

 

It's in the first post.

 

I must have suffered a bad attack of the stupids. I swear I didn't see a link! Really.

Rather than explicitly clearing the floats, cause the float's parent to enclose it.

.post { 
    overflow: hidden;  /*causes modern browsers to enclose child floats*/
    display: inline-block;  /*step one of IE hasLayout tripswitch*/
	position: relative;  /*offsets removed as redundant*/
	margin: 10px 10px 10px 20px;
	text-align: left;
    }

.post {
    display: block;  /*step two of hasLayout tripswitch*/
    }

Code (markup):

cheers,

gary

 

That fixed it, thanks so much!