Making Elements Float

You can make elements float in a sea of text (or other elements). You can use this technique to make text wrap around images ( and ) or figures to create multi-column layouts and more.

When you float an element to a side, the content that would normally display after it flows around it instead. Here, I’ve floated the image containers (a p with class="photo") to the left in order to get the blog entry introductory text next to them. (You can also apply float directly to img elements.) As you can see in , the text wraps around an image container when it’s taller than it. This effect is desirable in many cases, but for this page I want the text to continue straight down, regardless of its length. I achieve this by adding a left margin to the container around the text .