Splitting a floated DIV in 2 if it's going to drop down a row
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.



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

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.


