Question

I am trying to create a list that will float on the right side of an image.
So first of all to understand better, here is the fiddle :

http://jsfiddle.net/xpGbD/1/

Both the list and the image are contained inside a mutual DIV that floats.
What I am aiming for, is for the list to have a Key:Value pair, but some of the values are much longer than others.

This produces a problem, that when the value is greater than (DIV) – (Image) , the list jumps ABOVE the image, UNLESS I specify a fixed width for the list when floats right.

The problem is – I do not have a fixed IMG width , so if the width of the image is 100px for example, this will produce a large gap between the list and the image.

On the other had – if I fix a width on the LI elements , it will work, but will break if the image´s width will become bigger…

So the questions is :

How do I float the LIST elements to the right of the image without specifying width ??

Ps – another related problem :
at the current state – When a list VALUE is long , the key is positioned ABOVE the value. I would like it to start on the same line, and if needed to flow , flow below the VALUE areaa ,and not the key area (hence the )

Answer 1

Let me see if I’ve got the point…
When you try to float HTML elemets with unknown width, set the CSS property

display: inline;

To all floated elements.

Note that, the elements with different widths will not have an arranged grid view (table view)
If you want a table view : then you should specify width or use Table tag.

Hope this helps you.