floating text between two columns with white space in the middle

Question

I need to design a page similar to this

http://www.brightech.co.il/page.png

where the text and image are dynamically inserted in the server side, and the only thing which remains constant is the white space below the left column. I need the text to continue naturally from the paragraph in the upper left column to the lower right one.

Now, one solution (which can't be in css.. ) would be to float the image right, create a white div, and float it down. but there is no float:bottom in css...

I have an idea on how to implement this, but it is quite heavy on the browser side - that would be to put all the text in a div which is the left column, check for its height. then if it is too long, move the last word to the right column. check again if the left column's height is too long, and move another word, till it reaches the right height.

I'd love to hear any other ideas on how to do that since this would be my last resort.

If there is a webkit css solution for this it would be great, since the client side is mobile-safari.

Thanks!

Answer 1

This would probably be devilishly fun to develop from scratch.

But, if you use jQuery, then there are at least 2 plugins that might do this.

1. The jQuery Masonry plug-in.

2. The Columnizer jQuery Plugin.

Answer 2

You could just approximate the height by setting a character limit based on the image height.

Each line is about 45 characters long and 20 pixels high, so: 45*(h/20) would be close to your character limit.

The first block goes into the left column, then once the character limit is reached, it gets sent over to the right. You could do this on the server side or by applying css classes with javascript/jQuery.