A question that I get often and frustrates many non-technical bloggers is how to wrap text around images. There are two different ways to do this. They both work, but the second example is seen as “proper” and standards-based.
In our example, we have a content area that serves as the body of the website. It is in this area, we’ll experiment.
A few things to be aware of as we tackle this topic. The CSS property, float, works well when used well. According to the spec, “an element can be declared to be outside the normal flow of elements and is then formatted as a block-level element”. In other words, there are some potential unintended consequences. If your content is short and does not vertically scale to the size of the image, the floated element will not push other content (such as your next entry) farther down the page. Only elements deemed to be “in the normal flow of elements” will be able to push other elements down the page to prevent the floated image from overlapping with other page elements.
And the image we will use, a picture from a Dave Matthew’s concert I attended last year:
Problem:
If I simply drop this image into my HTML, you’ll notice that the paragraph text around it will push above and below the image creating an awkward bit of white to the sides of it. Not really what we want. (Example)
Solution 1
The first method for approaching this problem is through pure HTML. By using align="left" or align="right" in the image tag, the browser will render all the content around it. (example)
Solution 2
The preferred method of doing this is through CSS. It employs adding CSS rules float:left; or float:right; to the image. Though I’ve appplied these inline with the