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.
If you liked this blog, share the love:
