I am having some issues shaping text inside li elements. One problem I have is that the float-right divs do not float to the top right but leave a space at the top. Also, the text is not properly 'shaping' correctly. As you can see from [this](http://jsfiddle.net/u773M/) jsfiddle, the divs are well inside the grid lines, however the text does appear outside the lines. Also is there a way to put dashes to separate words when they don't fit (like I did on the last one), or make the text smaller?

Updated jsfiddle that shows bad text overflow: <http://jsfiddle.net/u773M/1/>

Here is my php that creates the text float divs:

```
<?php for ($i = 1; $i < 7; $i++) {
 echo '<div class="trianglefloatleft" style="width:'.(3+($i*6)).'%;"></div>';
 echo '<div class="trianglefloatright" style="width:'.(9+($i*6)).'%;"></div>'; }
?>

```