Splitting a floated DIV in 2 if it's going to drop down a row

Question

Say I have a wrapper DIV and, for example, the DIV is 600px wide.

Inside this div I left-float a series of content DIVs. These are either 200px or 400px wide, all have the same height.

Three 200px-wide DIVs would align perfectly one one line, a single 400px one followed by a 200px one also, etc.

Obviously if I had two 200px ones, followed by a 400px one, the latter would drop down to the row below, leaving a 200px-wide space at the end of the row above.

Now, assuming the content in these DIVs is text, would there be a way to detect a DIV will be dropping to the next row because of its width + lack of remaining space on the current row; then divide this 400px div into two 200px ones, splitting the content across them, leaving the first part as the last 200px wide DIV of line 1 and the rest in the first 200px DIV of line 2?

Jquery will be used on the site so if a solution using jquery could be found it would make things easier. I tried to play with the columnize plugin but found no way of doing this. I'm pretty much a JS beginner though.

Any help/pointers appreciated.

Answer 1

With jQuery you can find the div's CSS computed height, and if it is larger than what you expect from one line that means it has dropped down.

if ($("#id").height > default) // default will be an integer
{
   ... steps to make it two divs instead
}

Answer 2

A little clumsy but maybe it helps you to find your sollution:

var pos = 0;
$('.container div').each(
    function()
    {
     pos += $(this).width();
     if(pos > 600)
     {
      var div1 = $(this).children(".subdiv1");
      var div2 = $(this).children(".subdiv2");
      $(this).after(div1);
      $(this).after(div2);
      $(this).remove();   
     }
     if(pos >= 600)
      pos = 0;
    }
);