Skip to main content

Flexible Floats

By Simon Willison



Free JavaScript Book!

Write powerful, clean and maintainable JavaScript.

RRP $11.95

Dunstan Orchard has an interesting twist on the floated image gallery technique, originally introduced by Mark Newhouse back in August 2001 (was it really that long ago?). Floated image galleries use floated thumbnails to create a layout that appears to use table style columns, but dynamically reorganises itself as you resize the page. Dunstan’s variation uses Javascript to cause the individual floated element widths to increase to take up the additional space made available when only one column of elements are displayed at a time. It’s difficult to describe, but makes perfect sense if you play with his reading section for a short while.

This is an excellent example of Javascript being used to complement CSS in an inobtrusive manner, as browsers without Javascript support will still get a functional and attractive site, minus a small visual improvement if they are surfing with a smaller browser window.

It’s also interesting to see how Dunstan’s technique has evolved after feedback from readers of his blog. Read all about it in Flexible floats, Flexible floats 2 and Flexible floats 3.

Related Articles

New books out now!

Learn the basics of programming with the web's most popular language - JavaScript

A practical guide to leading radical innovation and growth.

Integromat Tower Ad