CODEWITHSUNDEEP
htmlcss
Pierre
Pierre

Reputation: 19071

Floating list beside an image

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.

Upvotes: 4

Views: 3297

Answers (2)

sandeep
sandeep

Reputation: 92803

As per i understand write like this:

img{
    float:left;
}

ul{
    display:inline;
}

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

Upvotes: 6

Michael Sazonov
Michael Sazonov

Reputation: 1533

Maybe try to put the <img> as one of the <li> elements?

Upvotes: 0

Related Questions