While the float quirk issue is by no means solely confined to images, it is most commonly associated with them, and so is addressed here.

The “float quirk” problem typically occurs when you have images that are both floated on the same side of the page in close proximity to each other. In our example, we will have a class that describes a similar format for a set of images. (Remember, class styles are for elements that occur multiple times on the same page and share the same properties, but the appearance used is not applied to the majority of the uses of the element on the page).

For example, a style in an embedded or linked style sheet:

1. img.theremin { height: 370px; width: 300px; float: right; margin-left: 1em; }

And for our code:

1. <p>The theremin is one of the only truly new musical instruments
2. created in the 20^th century. Other instruments, such as the electric guitar
3. and electronic synthesizer, were derived from existing classical forms, but the
4. theremin, invented by Russian professor Léon Theremin, is completely novel.
5. <img src=”images/theremin-performer.jpg” class=”theremin” alt=”Theremin
6. performer” title=“Theremin performer” /></p>
7. <p>It remains the only musical instrument that is not physically touched to
8. produce a tone.Instead, musical pitches are generated by the musician’s
9. interaction with two separate electric fields – one for frequency,
10. the other for amplitude. A theremin performance is as much physical
11. as it is musical, and
<a href=”http://www.ted.com/talks/pamelia_kurstin_plays_the_theremin.html”>
13. watching one</a> can be a mesmerizing experience.</p>
14. <p>Sounds produced by the theremin are continuous and glissading, creating
15. an “eerie” or haunting tone. The instrument was used to great effect in movies
16. such as <cite>The Day The Earth Stood Still</cite>,
17. <img src=”images/gort.jpg” class=”theremin” alt=”Gort, from The Day The Earth
18. Stood Still” title=”Gort, from The Day The Earth Stood Still” />
19. and in the Beach Boy’s <cite>“Good Vibrations”</cite>.</p>

The result will typically look something like the screenshot above. As the width of the browser window narrows, the second image will be forced down, until the point at which it “pops” under the first, to produce the effect that we were likely after in the first place.

So what is happening? Very simply, CSS is doing exactly what you tell it. float: right applied to an element means “float to the right of any content that comes after me”. For the first image, that content includes the second image, which follows it.

In order to fix this problem, we need to modify the CSS for the second image. The existing class is still true for both images, so ideally we could add to it:

1. img.theremin { height: 370px; width: 300px; float: right; margin-left: 1em;
2. clear: right; }

(If the images were different sizes and had separate inline styles we would only need to add clear: right; to the the second image. For this example, adding clear to the class is a little redundant, as the first image won't be affected, but it is a more efficient approach than adding a separate inline style to the second image.)

clear is a deceptively simple property that can take one of five values: left, right, both, inherit and none. It essentially means the following: “do not allow anything to float to this side of me”. In our case, our images are floated right; we don’t want anything to be to the right of those images, and clear: right takes care of that.

We would also typically add a margin-bottom property to separate the images visually:

1. img.theremin { height: 370px; width: 300px; float: right; clear: right;
2. margin: 0 0 2em 1em;}