Summary

By working through the construction of this example, my hope is that it'll help make a case for creatively using floats to achieve grid-like effects. By understanding how to clear floats, you gain access to a wide range of possibilities without having to add extra markup. There are certainly times when using a <table> is appropriate (for tabular data), but even using compact and meaningful markup doesn't mean the design has to suffer. We can serve markup that a wider range of devices and software can easily understand, and use CSS to do the rest.

Here are a few points to consider:

• Choose optimal markup from the start. You can always adjust as needed, but try to get by with the most compact, most meaningful structure when you are just beginning.

• Consider the "opposing floats" method for aligning items on either side of each other, regardless of where they appear in the markup. In our example, the title came before the image, but we wanted both to line up vertically. Opposing floats to the rescue!

• Be aware of clearing floats: test various amounts of content and text sizes to ensure your intended layout doesn't break down.