I have a list and an image. At the moment the image is floated left and the list is not floated. The list wraps around the image and appears under the image. What technique can I use so that the list does not wrap under the image but instead always appears to the right of it? Any help would be greatly appreciated.

The HTML looks like this:

Heading

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eget lorem ac arcu bibendum rutrum. Sed pretium dapibus dui. Maecenas.
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eget lorem ac arcu bibendum rutrum. Sed pretium dapibus dui. Maecenas.
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eget lorem ac arcu bibendum rutrum. Sed pretium dapibus dui. Maecenas.
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eget lorem ac arcu bibendum rutrum. Sed pretium dapibus dui. Maecenas.
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eget lorem ac arcu bibendum rutrum. Sed pretium dapibus dui. Maecenas.
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eget lorem ac arcu bibendum rutrum. Sed pretium dapibus dui. Maecenas.

I realize the HTML may not look the way it should. In the example the list should be wrapping around the image and fall right underneath it.

2 answers

0
points

I simply applied a margin-left (the same size as the image plus it's padding) to the li tag and it doesn't wrap anymore... Fancy that! :D

Answered over 6 years ago by Wen Griffin
Asmor 0
0
points
ul {
  clear:left;
}

Should work.

Answered about 6 years ago by Asmor