Text block with jagged edge

by tonytlwu

HTML

<div id="container">
    <div class="offset"></div>
    <div class="offset"></div>
    <div class="offset"></div>
    <div class="offset"></div>
    <div class="offset"></div>
    <div class="offset"></div>
    <div class="offset"></div>
    <div class="offset"></div>
    <div class="offset"></div>
    <div class="offset"></div>
    <div class="offset"></div>
    <p>Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Nullam id dolor id nibh ultricies vehicula ut id elit. Vestibulum id ligula porta felis euismod semper. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
    <p>Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Nullam id dolor id nibh ultricies vehicula ut id elit. Vestibulum id ligula porta felis euismod semper. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
    <p>Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Nullam id dolor id nibh ultricies vehicula ut id elit. Vestibulum id ligula porta felis euismod semper. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
</div>

CSS

body { margin: 10px; }

#container { width: 600px; line-height: 2em; margin: 0 0 2em; }

.offset { float: left; height: 2em; clear: both; }

JavaScript

var ladderStepWidth = 15;
$('.offset').each(function(i,el){
    $(this).width(ladderStepWidth*i);
});