Floating list beside an image

css, html

Solution

As per i understand write like this:

img{
    float:left;
}

ul{
    display:inline;
}

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

Problem

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.

Original source