Question

I have a box which contains an image, which has float:left set, and textual contents.

-------------------------------------
|---------                           |
||       |                           | 
|| Image |                           |
||       |       Content             |
|---------                           |
|                                    |
|                                    |
|                                    |
--------------------------------------
                                Fig. 1

I generally consider it good to have the content float around the image. However, in case of using lists, the following look is annoying:

-------------------------------------
|---------                           |
||       |   List                    | 
|| Image |                           |
||       |   1. Item                 |
|---------   2. Item                 |
|  3. Item                           |
|  4. Item                           |
|                                    |
--------------------------------------
                                Fig. 2

I’d rather have it the following way (at least for considerably short lists, let’s assume the list is short for now)

-------------------------------------
|---------                           |
||       |   List                    | 
|| Image |                           |
||       |   1. Item                 |
|---------   2. Item                 |
|            3. Item                 |
|            4. Item                 |
|                                    |
| Additional content (not in list)   |
--------------------------------------
                                Fig. 3

I got the above look by making the list display: inline-block (and either inserting a <br> before the list, or wrapping it in a block-level element)

However, in case of any long list items (longer than the small width of the content field),
the float is cleared.

-------------------------------------
|---------                           |
||       |                           | 
|| Image |                           |
||       |                           |
|---------                           |
| 1. Item                            |
| 2. A very long item, which makes   |
|    the list box just as wide as the|
|    outer box.                      |
| 3. More items                      |
-------------------------------------|
                                Fig. 4

Why this happens seems clear to me. In the floated environment, first, the list is rendered as a block (because of display: inline-block), using the width of the outer box as environment width. As there is a long items, the resulting block will be as wide as the outer box. In a second step, the block is tried to fit next to the floating image, where it won’t fit. Lastly, the float is cleared.

Is there any way to amend the situation? Like, first try to render the list with the shorter width, and if that fails, re-render? Or a completely different way to achieve what I want?

Answer 1

Try a plain overflow:hidden on your list – this should do the trick.

See the example.