For a long time we've wanted to get better looking property adverts onto Rentability. We thought about offering several layout templates that the owner could choose from. Then we thought about totally "floating" layouts where the user creates several "blocks" of content (text or photos) that are designed to flow down the page and be happy with different page widths and font sizes. The user doesn't have precise control over the placement of blocks. Instead, they have a bunch of blocks, of different dimensions that slot together down the page (from right to left and top to bottom) filling all available space. With fixed element widths (say a third or two thirds of the page) you can get a nice magazine/newspaper style look. Of course, a simple CSS float:left won't work all that well - you get a lot of holes where elements sort of clear:right as they wrap around down the page. So I tried to create this 'flowy' layout with javascript. The javascript measures each block, figures out how it slots into the layout, then positions it absolutely.
In the editing UI I've used scriptaculous to animate the reflowing of reordered blocks. This isn't always entirely intuitive - try the demo below - but then the whole approach is a compromise of sorts.
It's not beyond the realms of possibility that a layout will flow slightly differently on two different browsers. Actually, Sim's advert for the Pigeonnier lays out differently on IE than it does on Safari. Both looks great though! It's interesting how robust this technique can be.
Unless I've shown you a preview, you're probably wondering what the hell I'm going on about. Here's a demo page that you can play with (the changes you make are only visible by you).
