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