Calthorpe float Method Updated (15th May 2006)
The ever helpful members of Accessify Forums have helped me find a reliable way for floating images in articles. The old system simply applied float: left; to the <img> element.
The new method, based on Add a Float to Fix a Float, surrounds the <img> and any related paragraphs with a <div class="picture"> element. This container is then given float: right; and width: 100%; to enclose each image with its related content. This prevents images from stacking up across the page when a small text size and/or wide viewport are being used.
It makes the markup a little heavier than I’d like but it seems like the best solution available.
Incidentally, that topic also showed me a technique for only making the CSS available to browsers with thorough implementations. It works by using @import"style.css'; which will only get processed by browsers smart enough to realise that whitespace is optional here. I’ve included some browser reaction results in that thread and might write about it in the CSS tutorials section.