When it comes to shaping text inside li elements, I've encountered a few issues. One of the problems is that the float-right divs aren't floating to the top right corner but instead leaving a space at the top. Additionally, the text isn't 'shaping' correctly as desired. Although you can see from this jsfiddle that the divs are well within the grid lines, the text seems to be spilling over beyond those boundaries. Is there a way to add dashes between words when they don't fit (like in the last case), or perhaps make the text smaller?
Check out this updated jsfiddle showcasing the issue of text overflow: http://jsfiddle.net/u773M/1/
This is my php code responsible for creating 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>'; }
?>