- Prepare Images
- Float Images
- Place Images
- Add Background Images
- Extra Bits
Float Images
To get the text to wrap around the image, you need to float the image to the right or to the left. If you float a box element (let’s call it theAlpaca) to the right, anything outside theAlpaca will wrap around to its left.
If you instead float it to the left, anything outside theAlpaca will wrap around to its right.
But we don’t want that heading to be on the side of the alpaca, as it’s important. Additionally, when the headline is next to the alpaca, it appears that it’s about the alpaca—but it’s not.
To fix that, we want it to always be on a line by itself, and to do that, we need to clear the float.
#theAlpaca {float: right;} h1 {clear: right;}
That’s what you need to know about floating and clearing box elements. You can do this for any box element, not just images. You can float divs, paragraphs, whatever.