Re: Floats: What am I doing wrong?

On Tue, 10 Aug 2010 20:29:07 +0300, "Jukka K. Korpela"
<jkorpela@xxxxxxxxx> wrote:

Padmar Mushkin wrote:

I have a div containing a background image, a div containing text, and
want them to appear side by side.

It might be easier to use just one element, containing the text, so that the
element has a non-repeating background image and suitable padding.

I don't think this would work in my case. The background image will
come from different sources and have different sizes. Wouldn't it need
it's own div to make sure it fits in a 55x55 px square?

But the
question is whether the text should be in a full-width column if it
continues vertically below bottom of the image

No, I want the space below the image to be blank.

- in that case floating is
what you want.

I tried floating them, but the text
is appearing below the image. I uploaded an example here:

http://meechme.com/test.html

The element for the text, <div class="text">...</div>, being a block
element, occupies by default the entire available width (ín this case, the
width of the content of the container element). You might set some specific
width, but this would get difficult: what width would you use?

There's a simpler way: just remove
float: left
from the CSS rule for the .text element. There is no reason to make that
element floated; it is sufficient to make the photo float on the left, so
that any subsequent text in the document flows on its right (and then
returns to full width).

I don't want the text to flow around the image.

This will be part of a JavaScript powered application, so if necessary
I can use JS. But of course I would prefer a pure CSS solution.

.