Paragraph/image float

Making an image float next to a paragraph has many benefits such as better convincing the reader of what the paragraph says (images generate emotions), making the experience of reading the page more interesting, and making the page more attractive.

Image/paragraph floating using HTML

Use the align attribute of the <img> tag and set it to "left" to make the image float to the left of a paragraph, and "right" to make it float to the right.

Image/paragraph floating using CSS

The align attribute of the <img> tag is deprecated and you should use CSS to make images float next to paragraphs instead. Use the float property and set it to "left" to make the image float to the left of a paragraph, and "right" to make it float to the right.

Both sets of code produce the same output:

Eat fruits every day to get your natural sugars. One particular fruit which is really great is the apple. They say that "an apple a day keeps the doctor away" and they're not kidding!

Don't forget your vegetables either. Eating vegetables every day is very good for your body. Leafy green vegetables like lettuce are particularly good for you. Generally, you should have a balanced diet of vegetables, fruits, and so on.

NOTE: Remember to set margin and padding for proper spacing between the elements.