CSS Floating Div with Image VS Floating Div with Div having background-image

Hallo I have a Floating Div problem, that I can't understand.

If i write a div with float:left property and an Image tag, both are displayed in a line. e.g

<div style="background-image:url(calendar_container_bg.gif);background-repeat:repeat-x;width开发者_运维问答:670px;height:253px;border:1px solid #8E9EAB">
            <div style="height:36px">
              <div style="float:left;color:#01389F;font:bold 14px Arial;padding-left:20px;line-height:36px;width:614px;">
                  Frühestes Anreisedatum.
              </div>
              <img src="calendar_close_btn.gif" style="padding-top:10px">
              <div style="clear:left"></div>
            </div>
          </div>

But as I repleace the image tag with a DIV having the same image as background-image, then both DIV will be displayed on 2 different line. I don't want to use float:left again in second DIV.

img is an inline element (like text or span), so it goes on the same line as any other inline elements (which move to the right if you float a block element to the left).

div is a block element, i.e. each div gets its own vertical space. The only ways to get two divs in one line is:

1. float them
2. Make them display: inline