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

Question

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.

Answer 1

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