Why does this appear on the bottom when the character length is long?

[zsaplexgv]

I'm trying to make responsive design.DEMO http://jsfiddle.net/tbuU8/It should be something like this image.There are mainly 2 section such as Left and Right.
Left section is fixed with 300px width.
About Right section, it can be shrink(narrow) down to 300px.When if it's narrower than that, right section should be shown on the bottom just like the image below.

• right section should stay in right, unless width is narrowed down to under 300px.
• when if it's under 300px, it should be shown in the bottom.
• It needs break at the edge of right section when if it's long length text

In my demo, it shows right section on the bottom when the length of the character is long.
it needs break and starts at new line. It always try to show that in 1 line.How can I show right section on the right part, and text in that needs break.

Output that I want\[code\]July 22, 2013 11:34 Helloooooooooooooooooooooooooooooooooooooooooooooo <= need break! John Smith ooooooooooooooooooo! Avatar\[/code\]HTML\[code\]<div class="Row"> <div class="Box"> <div class="Left"> <div class="posted_at">July 22, 2013 11:34</div> <div class="user">John Smith</div> <div class="avatar">avatar</div> </div> </div> <div class="Box"> <div class="Right"> <div class="body">Helloooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo</div> <div class="image"></div> </div> </div></div>\[/code\]CSS\[code\]div.Row{ border:1px solid rgb(0, 0, 0); min-width: 300px; width: 100%; background-color:#ffffff; margin-bottom: 20px; margin-right: 20px; float:left; display:block; }div.Box{ padding:0px; text-align:center; float:left; }div.Left{ width:300px; padding-top:5px; padding-bottom:15px; text-align:center; color:#000000; clear:both;}div.LeftImage{ margin: 15px 15px 15px 15px;}div.Right{ padding-top:15px; padding-right:10px; text-align:left; color:#000000; clear:both; min-width: 300px; word-break: break-all;}div.posted_at{ padding:5px;}div.icon{ display:inline-block; padding: 10px;}div.icon img{ width:100%; height:100%;}\[/code\]