Question

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 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>'; }
?>

Answer 1

Thanks to @hakra, I got partly there. However, the real solution is much simpler and makes more sense (don’t know why it took me so long to realize this): Put the float right divs first!

Updated code for those that care: http://jsfiddle.net/u773M/4/