Using Text-Align Justify for Layout
Lately I have seen a lot of people using text-align:justify with display:inline-block to create layouts that would normally be done using a variety of other techniques. The approach is a brilliantly simple method, reusing older CSS with great effect. Evenly spaced navs and even grid systems (fully responsive, nonetheless) can be implemented using this old CSS2 declarations! One of my favorite parts of the technique is that it does away with the much reviled clearfix required for clearing the floated elements that make up so many multicolumn layouts.
I took a crack at making a menu that uses the technique to create a menu whole elements are evenly spaced, regardless of how many items you add. If there is not enough room, the items will go down to the next line (being justified as text would be), but this can easily be remedied by adjusting the font-size in your design. Adjusting the font size via media queries can also be used to create a responsive version of the design.
[row]
[column small=”small-12″ large=”large-6″]
Markup
Here is the markup for the nav – very simple:
<nav role='navigation'>
<ul>
<li><a href="#">Home</a></li>
…
<li><a href="#">Contact Us</a></li>
<li class="last"></li>
</ul>
</nav>
[/column]
[column small=”small-12″ large=”large-6″]
Style
Here are the relevant styles:
nav ul {
text-align: justify;
width: 100%;
font-size: 0.1px;
}
nav ul li {
display: inline-block;
font-size: 16px;
}
nav ul .last {
width: 100%;
height: 0;
}
[/column]
[/row]
The basic concept
The basic idea behind the technique is brilliantly simple. It takes advantage of text-align justify’s behavior, but instead of flowing text, you are flowing items with the display property set to inline-block. Inline block is great in that it allows elements to flow one after the other (much like words in a sentence), but they still take up space in the document flow, much like floats. However, anyone has messed with floats knows that the annoying part about them is that items floated inside a container element will cause the container to collapse to have no height. This requires the old clearfix, which I am sure you are familiar with if you have made it this far in the post. So having a container with justify and inline block children results in a unique and simple method of using justify to do our bidding.
Check out the CSS above. You can see that the <ul> has text-align:justify (the secret sauce for the technique) and width:100% (so it takes up the whole parent element’s width). The <li> elements have display:inline-block, and the special empty <li> with the class .last has it’s width set to 100% and height set to 0. The <li>.last is important because without it, the technique will not work. You have to have a last inline block element break onto a new line in order to trigger text-align:justify on the rest of the list items. 100% width does this, since by definition it breaks onto it’s own line. The height is set to zero, since we do not want it to actually take up any space.
There are a couple other bits you will need to address though. Notice the font size on the ul element is set to 0.1px – this eliminates an otherwise puzzling bit of space that will appear at the bottom of your nice justified menu. Try deleting it and see what happens, just make sure you have some content below the nav so you can see it. The font size is set back to what you actually want it to be on the <li> elements.
Now you have a clean and easy way to create a justified menu that is surprisingly backwards compatible, and requires no floating or calculating/hardcoding in margins. Throw in some media queries to resize the text, and this works great for responsive designs too! Just make the text bigger/smaller as needed.
And that’s really all there is to it!
Making it ready for the wild
Many examples point out that instead of using that last li with a special class, you can easily use the :after pseudo class to append the exact same element, effectively eliminating extraneous markup. I like the approach a lot, and will use it when I want to use this in the wild. I left it off my example because I think that it helps explain to those less familiar with pseudo classes. One more note on using a pseudoclass: :after is not supported in IE7, so if you want to avoid having to polyfill that, just leave your extra <li class=”last”> in there.
Speaking of Internet Explorer, IE7 requires a special hack for inline-block – just add these attributes
zoom: 1;
*display: inline;to the relevant items.
That’s it!
Check out the CodePen demo below, which was featured by the editors. Woot! A big shout out to everyone who commented on there.
Demo on Codepen
Further Reading
These articles go into a lot more detail, and explore using this for entire grid systems, something I am very excited to explore myself in the coming weeks!
Comments