CSS Float Images

Go Over There

Using CSS to float images is real easy. If you've used it and found the images would not stack, there's a simple solution.

clear: right
or
clear: left

When you float several images its necessary to add clear to the image property or images will not stack, they try to flow as they normal.

To overcome the natural use clear property to make the images behave as you want them to.

Example CSS

.floatLeft { float: left; margin: 5px 5px; clear: left; }

Example HTML

<img class="floatLeft" height="30" src="img.jpg" width="30" />
<img class="floatLeft" height="30" src="img.jpg" width="30" />
<img class="floatLeft" height="30" src="img.jpg" width="30" />
<img class="floatLeft" height="30" src="img.jpg" width="30" />

The code should look something like that.

Done!