How it works

The width of the image including any right padding or margin plus the width of the DIV that wrapps the text have to add up to the width of the LI. Floating the DIV right will stop the text from wrapping under the image. If you choose to float the DIV left, the text will flow under the image as normal. In addition, the LI elements have to be floated left. This would make the LI line up next to each other and produce columns, however we contain these floated left LIs in a container of the same width. In this case out UL which stops them floating left.