I have created a CSS helper class that is meant to justify-align the last line of text, or inline block divs, along with the rest of them.
Here is the CSS code I have implemented:
.justify-all-lines
{
text-align: justify;
/* IE-only properties that make the :after below unnecessary (we need this because IE 6/7 don't support :after, though) but if they both apply it'll be fine */
-ms-text-justify: distribute-all-lines;
text-justify: distribute-all-lines;
}
.justify-all-lines > *:last-child:after
{
display: inline-block;
width: 100%;
content: 'hello';
}
.blocky
{
display: inline-block;
/* Make inline block work in IE 6/7 */
zoom: 1;
*display: inline;
}
This class is to be used like so:
<div class="justify-all-lines">
<div class="blocky">There is content here.</div>
<div class="blocky">There is content here.</div>
<div class="blocky">There is content here.</div>
<div class="blocky">There is content here.</div>
<div class="blocky">There is content here.</div>
<div class="blocky">There is content here.</div>
<div class="blocky">There is content here.</div>
<div class="blocky">There is content here.</div>
<div class="blocky">There is content here.</div>
<div class="blocky">There is content here.</div>
</div>
However, I am encountering an issue where the 'hello' text appears inside the last "blocky" div instead of after it. What could be the problem here?