tricks for floating elements inside list elements

Question

I'm trying to create a instruction list using ordered lists (ol). Inside I want the text for the instruction to be floated left and the image showing the step floated right.

I've tried wrapping the content inside the list item (li) like so:

    <ol>
      <li><p style="float:left">Follow these instructions</p><img style="float:right" src="[***]" alt="" /></li>
    </ol>

That just sends the image outside the li element. I've tried adding a clearing div after the two floated elements inside the li, I've tried adding a clear hack to the li element itself. I've also tried nesting the p and img elements inside floated divs.

Is this even possible? Would like to use this manner, but will generate some other solution if not.

Answer 1

You could also consider using the overflow: hidden technique; adding overflow: hidden to your li will enable it to expand to contain the floated content.

jsFiddle here.

Answer 2

A non-floated container will not recognise its contents as having and width or height, causing the container to collapse to its minimum allowed height given any other CSS rules in place.

For the paragraph and image to be constrained by the containing list element, you will need to float both the list element and the parent ordered list.

Both the ordered list and the list elements will then reduce to the minimum width required to presentationally encapsulate the content. This may result in an overly-thin list. Apply suitable widths to the ordered list and the list items to handle this.

Consider clearing any elements immediately below the ordered list in the DOM to ensure they don't slip in to the left or right of the list.