«

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. But the
question is whether the text should be in a full-width column if it
continues vertically below bottom of the image - 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).

--
Yucca, http://www.cs.tut.fi/~jkorpela/

Padmar Mushkin wrote:

> 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?

No, you could make it a content image and format it directly. But if you
want cropping, then a background image appears to be the simplest approach.
Note that the image will then normally not appear if the page is printed.

>> 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.

Then I'd say the simplest and safest approach is to use a two-cell table.
What you seem to want is to set the total block width in em units and the
image width (= the width of the element where you have the image as
background) in pixels. You can do this easily with a table.

--
Yucca, http://www.cs.tut.fi/~jkorpela/

Padmar Mushkin wrote:
> <> wrote:

> 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.
>

Take the float off of ,text and add a left margin of the width of your
image + whatever your margin from image...

..text
{
/* width of image 55px + 10px margin... */
margin-left: 65px;
margin-bottom:8px
}



--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com