Question

It it possible to achieve the following layout in CSS using a <ul></ul> and an <img /> ?

|-------------| (li) (li) (li) (li) (li)
|             | (li) (li) (li) (li) (li) 
|             | (li) (li) (li) (li) (li) 
|             | (li) (li) (li) (li) (li) 
|    image    | (li) (li) (li) (li) (li) 
|             | (li) (li) (li) (li) (li) 
|             | (li) (li) (li) (li) (li) 
|-------------| (li) (li) (li) (li) (li) 
 (li) (li) (li) (li) (li) (li) (li) (li)
 (li) (li) (li) (li) (li) (li) (li) (li)

JSfiddle; I have tried using float, inline-block and display:table, but whenever the number of <li> elements exceed the allowed space, the whole list is shifted below the image. This number is randomly generated every time. Can vary from 1 to 50.

My current HTML is:

<img src="" />
<ul>
    <li>a</li>
    <li>b</li>
    <li>c</li>
    <li>d</li>
    <!-- etc.. -->
</ul>

The best layout I got was using box-sizing some padding:

|-------------| (li) (li) (li) (li) (li)
|             | (li) (li) (li) (li) (li) 
|             | (li) (li) (li) (li) (li) 
|             | (li) (li) (li) (li) (li) 
|    image    | (li) (li) (li) (li) (li) 
|             | (li) (li) (li) (li) (li) 
|             | (li) (li) (li) (li) (li) 
|-------------| (li) (li) (li) (li) (li) 
                (li) (li) (li) (li) (li)
                (li) (li) (li) (li) (li)
                (li) (li) (li) (li) (li)

CSS3-based solutions are accepted. Javascript-based solutions are not.

Answer 1

As per i understand write like this:

img{
    float:left;
}

ul{
    display:inline;
} 

Check this http://jsfiddle.net/CFHru/1/