What am I not understanding about float?

Firefox doesn't like what I'm doing...

[FourDegreez]

HTML snippet:

<img src="/img/logo.gif" alt="Logo" style="float: left;"/>
<div class="dt" style="width: 340px;">
July 30, 2005
</div>

The div class "dt" just sets some colors and padding. What I want to happen (and what happens in IE) is for the date div box to show up to the right of the logo image. Firefox makes it overlap the logo image.

My understanding of float is that boxes will line up to the left (or right) rather than appearing on the next line below. I guess my understanding is not right.

I realize this is an elementary question, but it's driving me nuts.

[SugarKane2]

<div class="dt"><img src="foo.gif" style="float: left; margin-right: 7px"/>text</div>

You can play around with margin on the image to position the text.

[ronin]

When you tell a block-level element to float, you should always - nay, you MUST - specify a width for that block-level element.