Question

I’ve got a CSS helper class that is designed to force the last line of “text” (or in the intended usage, inline block divs) to become justify-aligned as well as the rest of them.

Here’s the code I’ve got:

.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 is intended for use like so:

<div class="justify-all-lines">
    <div class="blocky">There is stuff in here.</div>
    <div class="blocky">There is stuff in here.</div>
    <div class="blocky">There is stuff in here.</div>
    <div class="blocky">There is stuff in here.</div>
    <div class="blocky">There is stuff in here.</div>
    <div class="blocky">There is stuff in here.</div>
    <div class="blocky">There is stuff in here.</div>
    <div class="blocky">There is stuff in here.</div>
    <div class="blocky">There is stuff in here.</div>
    <div class="blocky">There is stuff in here.</div>
</div>

However, I see the ‘hello’ show up INSIDE the last “blocky” div instead of after the last “blocky” div. What am I doing wrong?

Answer 1

Working solution:

.justify-all-lines
{
    /* This element will need layout for the text-justify
     * to take effect in IE7 (and possibly previous versions);
     * this will force it, for more info Google "hasLayout in IE"
     */
    overflow: hidden;
    text-align: justify;

    /* For IE6 to IE7 since they don't support :after */
    -ms-text-justify: distribute-all-lines; /* IE8+ */
    text-justify: distribute-all-lines; /* IE5+ */
}

.justify-all-lines:after
{
    /*
     * We don't need IE6 and IE7 inline-block hack support here
     * since they don't support :after anyways (the text-justify
     * properties for them are above)... IE8 and above have native
     * inline-block support so for IE8+, both the text-justify and
     * :after will take effect but it doesn't have any negative
     * effects since this element is invisible
     */
    display: inline-block;
    width: 100%;
    content: '.';
    font-size: 0;
    height: 0;
    line-height: 0;
    visibility: hidden;
}