floating two div whereas one contains dynamic text - how to keep it from staying on the right of the first div?

Here is the html:

<div style="width:300px;height:220px;background:#00A;float:left">block 1</div>

<div style="background:#0A0;display:table-row">block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2 block 2</div>

<div style="background:#A00;display:table-row">block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3 block 3</div>

<div style="background:#600;display:table-row">block 4 block 4 block 4 block 4 block 4 block 4 block 4 block 4 block 4 block 4 block 4 block 4 block 4 block 4 block 4 block 4 block 4 block 4 block 4 block 4 block 4 block 4 block 4 block 4 block 4 block 4 block 4 block 4 block 4 block 4 block 4 block 4 block 4 block 4 block 4 block 4 block 4 block 4 block 4 block 4 block 4 block 4 block 4 block 4 block 4 block 4 block 4 block 4 block 4 block 4 block 4 block 4 block 4 block 4 block 4 block 4 block 4</div>

I got block 2 to appear on the right of block 1, howe开发者_Go百科ver the problem is when block 2 or block 3 will pass block 1's height, it will not take the full width of the page.

Here is a good example of what I want: http://sovietrussia.org/o/

How can I achieve the same layout without using tables? Basically there is a block on the left (the image) and then all other blocks appear on the right or bottom of the image depending if it fits there and the text blocks always take up 100% width

Try this

div
{
display: table-cell;
}

fiddle