Skip to main content

Flexible Floats

By Simon Willison

JavaScript

Share:

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.

New books out now!

Learn valuable skills with a practical introduction to Python programming!


Give yourself more options and write higher quality CSS with CSS Optimization Basics.